(Adding and) Removing list items with JavaScript / jQuery <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>