Question

I have an icon inside a list, I’d like to just be able to detect the double click on the icon – so I can delete the list, how is this possible (JQuery Sortable)

$("#roleList").dblclick(function(e) {
    var text = $(e.target).html();
    $(e.target).fadeOut('slow', function() {
        $("#deleteList").append(e.target);
    });
});


<ul id="roleList" class='droptrue'>
    <li class="ui-state-default" id="20~Role 1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input id="20" name="20" type="text" value="Director General" /></li>                                                                             
<li class="ui-state-default" id="1~Role 2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input id="1" name="1" type="text" value="Director" /></li>
</ul>

So I want to detect the click on the "ui-icon ui-icon-arrowthick-2-n-s" class so I can trigger a .fadeout and “delete” that list item.

I’m guessing if I can do that, this wont work:

var text = $(e.target).html();
$(e.target).fadeOut('slow', function() {
    $("#deleteList").append(e.target);
});

I’ll have to do a e.target.parent? Because I’d like to .fadeout the ENTIRE <li> and not just the icon.

Any help would be appreciated

Answer 1

You can try this one :

$(".ui-icon").live("dblclick", function(){
  $(this).remove();
});

This will attach a double click event to any element with a class ui-icon which when executed will remove the element. If you want to delete the parent li element with a fade out:

$(".ui-icon").live("dblclick", function(){
      $(this).parent('li:first').fadeOut('slow', function(){
        $(this).remove();
       });
 });

I hope this is what you are looking for