title: Remove last input field in dynamic list with jQuery
body: <p>How I can manage to remove the last <code>&lt;div&gt;&lt;input type="text" name="mytext[]"&gt;&lt;/div&gt;</code> even from the "top" button for remove? When I create many fields, when I click the "remove glyphicon on top of them" it deletes all, not the last.</p>
  
  <p>When I click the button for remove on the right of the field when I make new field it removes the field, but I want to remove also and from the top buttons</p>
  
  <pre><code>&lt;div class="input_fields_wrap"&gt;
      &lt;button class="add_field_button"&gt;
          &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;button class="remove_field" &gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div&gt;&lt;input type="text" name="mytext[]"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      var max_fields = 10; //maximum input boxes allowed
      var wrapper = $(".input_fields_wrap"); //Fields wrapper
      var add_button = $(".add_field_button"); //Add button ID
      var x = 1; //initlal text box count
      $(add_button).click(function (e) { //on add input button click
          e.preventDefault();
          if (x &lt; max_fields) { //max input box allowed
              x++; //text box increment
              $(wrapper).append('&lt;div&gt;&lt;input type="text" name="mytext[]"/&gt;&lt;a href="#" class="remove_field"&gt;\n\
                                  &lt;button &gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/button&gt;\n\
                                  &lt;/span&gt;&lt;/a&gt;&lt;/div&gt;'); //add input box
          }
      });
      $(wrapper).on("click", ".remove_field", function (e) { //user click on remove glyphicon
          e.preventDefault();
          $(this).parent('div').remove();
          x--;
      })
  });
  </code></pre>