title: How to remove all the elements other than the last element in a HTML form
body: <p>I have a html form as follows</p>
  
  <pre><code>&lt;div class="control-group" id="fields"&gt;
      &lt;label for=""&gt;Use this section to add as many execution steps as you would like for this test case.&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;form role="form" autocomplete="off" id="formStep"&gt;
              &lt;div class="entry input-group col-sm-12" style="margin-bottom:3px;"&gt;
                  &lt;input class="form-control stepFields" name="fields[]" type="text" placeholder="test step"&gt;
              &lt;/div&gt;
              &lt;div class="entry input-group col-sm-12" style="margin-bottom:3px;"&gt;
                  &lt;input class="form-control stepFields" name="fields[]" type="text" placeholder="test step"&gt;
              &lt;/div&gt;
              &lt;div class="entry input-group col-sm-12" style="margin-bottom:3px;"&gt;
                  &lt;input class="form-control stepFields" name="fields[]" type="text" placeholder="test step"&gt;
              &lt;/div&gt;
              &lt;div class="entry input-group col-sm-12" style="margin-bottom:3px;"&gt;
                  &lt;input class="form-control stepFields" name="fields[]" type="text" placeholder="test step"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;br&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have the following JS (Jquery) </p>
  
  <pre><code>    $('.controls form')
          .not($(this).children('.entry').last()[0])
          .remove(); 
  </code></pre>
  
  <p>What I would like to do is to remove all the divs with the class name <code>entry</code>  <em>except the last one</em> ? </p>
  
  <p>Can you please let me know what I am doing wrong here ? </p>
  
  <p>Thanks </p>