(Adding and) Removing list items with JavaScript / jQuery

Question

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).

Here is the thing. I have a list with lots of stuff in each list item:

<ul id="fruit_list">
    <li>
         <h4> Fruit 1: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>

    <li>
         <h4> Fruit 2: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>
</ul>

<a href="#" class="add">add</a>

What I want to do, is when I click on the anchor 'remove', to remove the list item containing it.

(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.)

So here is what I've written so far:

$(function(){
    var i = $('#fruit_list li').size() + 1;

    $('a.add').click(function() {
        $('<li><h4>Fruit '+i+':<a href="#" class="remove">
             remove</a></h4><p>Blabla</p></li>')
        .appendTo('#fruit_list');
        i++;
    });

    $('a.remove').click(function(){

        $(this).parentNode.parentNode.remove();
        /* The above obviously does not work.. */
        i--;
    });
});

The 'add' anchor works as expected. The 'remove' drinks a lemonade..

So, any ideas? Thanks

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:

$('a.remove').live('click', function(){
    $(this).closest('li').remove();
    i--;
});

Thank you for your rapid help!

$('a.remove').click(function(){ => $('a.remove').live('click',function(){ — Moak
– Moak, Commented May 22, 2011 at 11:36

Travis · Accepted Answer · 2011-05-22 11:34:54Z

1

The a.remove event binding needs to be a live http://api.jquery.com/live/ binding. The nodes are added to the DOM after doc ready is called.

Additionally, I think you want to use parent() instead of parentNode. Unless I'm behind on my jQuery, parentNode is just DOM manipulation and there's no standard remove(), it's removeChild(). Here you need a jQuery collection returned from parent().

answered May 22, 2011 at 11:34

Travis

10.6k2 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

teuneboon Over a year ago

My personal opinion is that you should never use live unless absolutely necessary, since it has quite an impact on performance.

Travis Over a year ago

In my experience, most pages this isn't a huge deal. It can matter though if you have a ton of data on the page or a lot going on in the DOM.

Gary Green · Accepted Answer · 2011-05-22 12:47:32Z

0

Try $(this).parents("LI").remove();

edited May 22, 2011 at 12:47

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

answered May 22, 2011 at 11:28

ek_ny

10.3k8 gold badges51 silver badges60 bronze badges

Comments

Gary Green · Accepted Answer · 2011-05-22 12:48:12Z

0

The reason is that $('a.remove') is only executed once, and so only found at the moment you don't have any remove links yet. To solve this rewrite your ADD function like this:

$('a.add').click(function() {
    var $li = $('<li><h4>Fruit '+i+':<a href="#" class="remove">
         remove</a></h4><p>Blabla</p></li>');
    $li.appendTo('#fruit_list');
    $li.find('a.remove').click(function() {
        $li.remove();
        i--;
    });
    i++;
});

And just remove your old remove function.

EDIT: Oh, this will only work for items you add, if you already load some list items in the html before any Javascript is executed add this function under the $('a.add').click:

$('a.remove').click(function(){
    $(this).parent().parent().remove();
    i--;
});

edited May 22, 2011 at 12:48

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

answered May 22, 2011 at 11:31

teuneboon

4,0645 gold badges25 silver badges28 bronze badges

Collectives™ on Stack Overflow

(Adding and) Removing list items with JavaScript / jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related