Question

I am using jquery to implement a draggable LI object. I want to be able to delete the image when the user clicks delete. Here is the code below:

<li class="ui-widget-content ui-corner-tr" id="1">
    <h5 class="ui-widget-header">Click for details</h5>
    <A href="" onclick='return onShowTask("Sample Task");'><img src="graphics/task.png" width="96" height="72" /></a>
    <center>Sample Task</center>
    <a href="" onclick='return onShowTask("Sample Task");' title="View details" class="ui-icon ui-icon-zoomin">View Details</a>
    <a href="" class="ui-icon ui-icon-trash">Delete image</a>
</li>

Answer 1

When you click on the delete button this will delete the parent li. I believe this is what your after.

$(".ui-icon-trash").on("click", function(e) {
    e.preventDefault();
    $(this).parent("li").remove();
});