title: How to wrap an input element and its label into a div and place it after its parent element?
body: <p>I'm writing a Django form with an <code>ImageField</code>, which by default has a <a href="https://docs.djangoproject.com/en/2.0/ref/forms/widgets/#clearablefileinput" rel="nofollow noreferrer"><code>ClearableFileInput</code></a> widget which inserts an additional checkbox to clear the file if one is already selected.</p>
  
  <p>I'm implementing the form using Materialize (<a href="http://materializecss.com/forms.html" rel="nofollow noreferrer">http://materializecss.com/forms.html</a>), by which the file <code>&lt;input&gt;</code> is wrapped in a <code>div</code> with class <code>"btn"</code>. 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.</p>
  
  <p>So far, I've tried calling <a href="http://api.jquery.com/wrapall/" rel="nofollow noreferrer"><code>wrapAll()</code></a> on the selected elements and then following the approach described in <a href="https://stackoverflow.com/questions/6383941/jquery-move-node-out-of-its-parent">jQuery move node out of its parent</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("&lt;div /&gt;").each(function() {
        $(this).parent().after(this);
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"&gt;  
    
    &lt;div class="row"&gt;
      &lt;div class="file-field input-field col s12"&gt;
        &lt;label class="active" for="id_headshot"&gt;Headshot&lt;/label&gt;
        &lt;div class="btn"&gt;
          &lt;span&gt;File&lt;/span&gt;
          Currently: &lt;a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png"&gt;IMG_3515.png&lt;/a&gt;
  &lt;input type="checkbox" name="headshot-clear" id="headshot-clear_id" /&gt;
  &lt;label for="headshot-clear_id"&gt;Clear&lt;/label&gt;&lt;br /&gt;
  Change:
  &lt;input type="file" name="headshot" id="id_headshot" /&gt;
          
        &lt;/div&gt;
        &lt;div class="file-path-wrapper"&gt;
          &lt;input class="file-path validate" type="text"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, what I'm getting is an empty <code>div</code> element after the parent, followed by the selected <code>input</code> and <code>label</code> elements:</p>
  
  <p><a href="https://i.stack.imgur.com/lvl5E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lvl5E.png" alt="enter image description here"></a></p>
  
  <p>How can I get the <code>input</code> and <code>label</code> to first get wrapped inside a <code>div</code>, and then have that <code>div</code> moved after its parent <code>div</code>?</p>