Jquery remove. button within div to be removed

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

I think there is a method like .parent in jQuery. You may use this... http://api.jquery.com/parent/

If your button is added dynamically, you have to rebind it. Otherwise jQuery won't know the DOM Element.

Answer 2

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()
});