Remove dynamically added LI list item with jQuery

Question

I am trying to dynamically add a list item to a list and then remove it by clicking on that item. The remove event never seems to fire. However if I use the same code on a static list it works fine. I've seen similar solutions but they do not work.

See jsFiddle: http://jsfiddle.net/Lc2bC/

<input id="status" type="text" placeholder="Status (tab or enter)">

<br/>
Dynamic List:
<ul id="statusList"></ul> 


$('#status').keydown(function (e) {
    if (e.which == 9 || e.which == 13) {
        $('#statusList').html($('#statusList').html() + formatNewStatus(this.value));
        this.value = "";
        this.focus();
        e.preventDefault();
    }
});

$(function () {
    $('#statusList li').click(function () {
        alert('dynamicList');
        $(this).remove();
    })
});

You have to use delegation with on() – A. Wolff Jan 09 '14 at 16:59 — A. Wolff, Jan 09 '14 at 16:59

score 6 · Accepted Answer · answered Jan 09 '14 at 17:00

6

It's because the click() function only binds to elements that exist in the dom at the time it is called.

live() is the older technique, but is deprecated and will not be supported in future versions.

What you need to use is on()

$(function () {
    $('#statusList').on('click', 'li', function () {
        alert('dynamicList');
        $(this).remove();
    });
});

answered Jan 09 '14 at 17:00

random_user_name

25,694
7
76
115

`live()` is not even supported in current versions -- it was removed in jQuery 1.9. Why would you even bother mentioning it, since the question never asked about it? – Barmar Jan 09 '14 at 17:02
1

All accurate information is helpful, especially for people like me who are in and out of jQuery. I didn't realize that on() replaced live(), as I don't do a lot of jquery. I actually tried to use live() at some point. Thanks for the info. – Papa Burgundy Jan 09 '14 at 17:13

score 2 · Answer 2 · answered Jan 09 '14 at 16:58

2

The click function only binds to elements that were present when it was called. Use on() instead.

on()

Attach an event handler function for one or more events to the selected elements.

http://api.jquery.com/on/

answered Jan 09 '14 at 16:58

Eric J.

147,927
63
340
553

4

`live()` was deprecated in jQuery 1.7, removed in 1.9. You mean `on()`. – Barmar Jan 09 '14 at 16:59
1

Good catch, updated. I'm still working on an old jQuery code base. Updated the answer. – Eric J. Jan 09 '14 at 17:00

score 2 · Answer 3 · answered Jan 09 '14 at 17:04

2

Use on http://api.jquery.com/on/

$(function () {
    $('#statusList').on("click", "li", function () {
        alert('dynamicList');
        $(this).remove();
    })
});

FIDDLE

answered Jan 09 '14 at 17:04

Merlin

4,907
2
33
51

Correct as well. Thanks for making use of the fiddle too. – Papa Burgundy Jan 09 '14 at 17:15

Remove dynamically added LI list item with jQuery

3 Answers3