Jquery remove. button within div to be removed

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开发者_StackOverflow</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??

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

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.