Question

I have an list item with a button inside of it. The button is attached to a jquery function to remove the list item.

    //Delete Button - delete from cart
    $('.ui-icon-trash').click(function() {
        $(this).closest('li').remove()
    });

<li>
content here....
<a href="#" title="Remove from cart" class="ui-icon ui-icon-trash">Remove from cart</a>
</li>

Why isn’t this working?? Is it because the button is within the item i want to remove? Is there a way around this??

Answer 1

My guess is that the binding is not working because the li is created dynamically?

Binding only happens once on document ready. So if the element is created after the page load, then the click event will not be bound.

In which case use live:

$('.ui-icon-trash').live('click',function() {
    $(this).closest('li').remove()
});