title: (Adding and) Removing list items with JavaScript / jQuery
body: <p>I am almost a noob at JavaScript and jQuery, (so I apologize if I didn't recognize a suiting answer to my question, in similar posts).</p>
  
  <p>Here is the thing. I have a list with lots of stuff in each list item:</p>
  
  <pre><code>&lt;ul id="fruit_list"&gt;
      &lt;li&gt;
           &lt;h4&gt; Fruit 1: &lt;a href="#" class="remove"&gt;remove&lt;/a&gt; &lt;/h4&gt;
           &lt;p&gt; blablabla &lt;/p&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
           &lt;h4&gt; Fruit 2: &lt;a href="#" class="remove"&gt;remove&lt;/a&gt; &lt;/h4&gt;
           &lt;p&gt; blablabla &lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;a href="#" class="add"&gt;add&lt;/a&gt;
  </code></pre>
  
  <p>What I want to do, is when I click on the anchor 'remove', to remove the list item containing it.</p>
  
  <p>(Optionally I would like to manipulate the incremental number at Fruit 1, Fruit 2 etc, in a way that when I remove item #2, then the next one becomes the #2 etc. But anyway.)</p>
  
  <p>So here is what I've written so far:</p>
  
  <pre><code>$(function(){
      var i = $('#fruit_list li').size() + 1;
  
      $('a.add').click(function() {
          $('&lt;li&gt;&lt;h4&gt;Fruit '+i+':&lt;a href="#" class="remove"&gt;
               remove&lt;/a&gt;&lt;/h4&gt;&lt;p&gt;Blabla&lt;/p&gt;&lt;/li&gt;')
          .appendTo('#fruit_list');
          i++;
      });
  
      $('a.remove').click(function(){
  
          $(this).parentNode.parentNode.remove();
          /* The above obviously does not work.. */
          i--;
      });
  });
  </code></pre>
  
  <p>The 'add' anchor works as expected. The 'remove' drinks a lemonade..</p>
  
  <p>So, any ideas?
  Thanks </p>
  
  <p>EDIT: Thanks for your answers everybody!
  I took many of your opinions into account (so I won't be commenting on each answer separately) and finally got it working like this:</p>
  
  <pre><code>$('a.remove').live('click', function(){
      $(this).closest('li').remove();
      i--;
  });
  </code></pre>
  
  <p>Thank you for your rapid help!</p>