Question

I have HTML:

<button id='pusher'>pusher</button>

<ul id="sortable">
    <li>things here</li>
</ul>

And JavaScript:

$(".del").click(function(e) {
    $(this).parent().remove();
});


$("#pusher").click(function(e) {
    var text = "test";
    var lix = $("<li class='uix' />").text(text);
    lix.append($('<button class="del">xx</button>'));
    lix.appendTo($("#sortable"));
});

I’m trying to make the pusher button make new <li> elements with a delete button inside, then when delete button is pressed it deletes its <li> element…

But it is not deleting.

Any ideas?

Answer 1

$(".del").click(function(e) {

This only binds to .del elements that exist when it’s ran. You want to use .live.

$(".del").live('click', function(e) {
    $(this).parent().remove();
});

This will bind the event to the element, no matter when it was added.

EDIT: It seems .live is deprecated, try using .on instead.

$(document).on('click', '.del', function(e) {
    $(this).parent().remove();
});