How to wrap an input element and its label into a div and place it after its parent element?

Question

I'm writing a Django form with an ImageField, which by default has a ClearableFileInput widget which inserts an additional checkbox to clear the file if one is already selected.

I'm implementing the form using Materialize (http://materializecss.com/forms.html), by which the file <input> is wrapped in a div with class "btn". In the case that a file is already uploaded, however, the additional 'clear' checkbox also appears inside the button, whereas I'd like to have it outside.

So far, I've tried calling wrapAll() on the selected elements and then following the approach described in 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>

However, what I'm getting is an empty div element after the parent, followed by the selected input and label elements:

How can I get the input and label to first get wrapped inside a div, and then have that div moved after its parent div?

Answer 1

Give the wrap a class so it's easier to handle, then use that new class as a selector with insertAfter() method.

Demo

$(":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>