無法刪除從一個jQuery排序列表2.0

Question

<div class="add">Click me to add new item to list</div> 
<ul id="sortable"> 
    <li class="delete"> 
     <div class="item">these old items can be removed by click on <span class="delBtn">DEL</span></div> 
    </li> 
    <li class="delete"> 
     <div class="item">these old items can be removed by click on <span class="delBtn">DEL</span></div> 
    </li> 
    <li class="delete"> 
     <div class="item">these old items can be removed by click on <span class="delBtn">DEL</span></div> 
    </li> 
</ul> 


$("#sortable").sortable(); 

$(".add").click(function() { 
    var newItem = '<li class="delete"><div class="item">these <span class="red">new items cannot be removed</span> by click on <span class="delBtn">DEL</span></div></li>'; 
    $("#sortable").append(newItem); 
}); 

$("#sortable").delegate('.delBtn', 'click', function() { 
    alert("A click happened, it was captured at #commonParent and this alert ran");  
}); 

，而不是警告新加入的項目，我woud想刪除列表項... 請幫幫我，我該怎麼做？

可以try it here ...

Answer 1

嘗試.on代替：

$("#sortable").sortable(); 

$(".add").click(function() { 
    var newItem = '<li class="delete"><div class="item">these <span class="red">new items cannot be removed</span> by click on <span class="delBtn">DEL</span></div></li>'; 
    $("#sortable").append(newItem); 
}); 

$("#sortable").on('click','.delBtn', function() { 
    $(this).parent().remove(); 
}); 

小提琴：http://jsfiddle.net/MvnEv/111/

Answer 2

好，如果你正在使用jquery1.6 +，而是使用在委託..

$("#sortable").on('click','.delBtn', function() { 
    alert("A click happened, it was captured at #commonParent and this alert ran"); 
    $(this).parents('.delete').remove(); 
    //or 
    $(this).closest('.delete').remove(); 
}); 

和remove()從DOM中刪除。

parents()或closest()選擇器選擇li元素

fiddle here

Answer 3

你可以做這樣的事情

$("#sortable").sortable(); 

$(".add").click(function() { 
    var newItem = '<li class="delete"><div class="item">these <span class="red">new items cannot be removed</span> by click on <span class="delBtn">DEL</span></div></li>'; 
    $("#sortable").append(newItem); 
}); 

$("#sortable").delegate('.delBtn', 'click', function() { 
    $(this).closest("div").remove(); 
}); 

fiddle