title: Jquery trying to remove dynamically made elements
body: <p>I am using Jquery to dynamically add elements to my form and then remove them if necessary, I can do this when there is only one form being added, however my next form allows the user to add an ingredient and it adds a quantity element with it, I cant work out how to remove both the elements with a button. I have created a JSfiddle would be great if something could help.</p>
  
  <p><a href="http://jsfiddle.net/w5PKZ/" rel="nofollow">http://jsfiddle.net/w5PKZ/</a></p>
  
  <pre><code>$(document).ready(function() {
      var addDiv2 = $('#addIngredient');
      var i = $('#addIngredient p').size() + 1;
  
      $('#addNewIngredient').on('click', function () {
          $('&lt;p&gt; &lt;input id="step_' + i + '" size="40" name="ingredient[]' + '" type=text" value="" placeholder="Ingredient" /&gt; &lt;/p&gt;').appendTo(addDiv2);
          $('&lt;p&gt; &lt;input id="step_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /&gt;&lt;a href="#" class="remNew2"&gt;Remove&lt;/a&gt; &lt;/p&gt;').appendTo(addDiv2);
          i++;
          return false;
      });
  
      $(document).on('click','.remNew2', function () {
          if (i &gt; 3) {
              $(this).parents('p').remove();
              i - 2;
          }
          return false;
      });
  
  });
  </code></pre>