如何将输入元素及其标签包装到div中并将其放在其父元素之后？

Question

我正在编写一个带有ImageField的Django表单，默认情况下它有一个ClearableFileInput小部件，如果已经选择了一个文件夹，则会插入一个额外的复选框来清除该文件。

我正在使用Materialise（http://materializecss.com/forms.html）实现表单，文件<input>通过该表单包含在div类"btn"中。然而，在文件已经上传的情况下，附加的“清除”复选框也出现在按钮内，而我想将它放在外面。

到目前为止，我已尝试在所选元素上调用wrapAll()，然后按照jQuery move node out of its parent中描述的方法进行操作：

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div />").each(function() {
      $(this).parent().after(this);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">  
  
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>

但是，我得到的是父母之后的空div元素，后跟选定的input和label元素：

如何让input和label首先包含在div中，然后让div在其父div之后移动？

Answer 1

为包裹提供一个类，以便更容易处理，然后将该新类用作 insertAfter() 方法的选择器。

演示

$(":checkbox, :checkbox + label").wrapAll("<div class='wrap'></div>");   

$('.wrap').insertAfter('.btn');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">  
  
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>