無法從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");      
});

我不想刪除警報，而是想刪除列表項...請幫助我，我該怎么做？

你可以在這里嘗試 ...

Answer 1

好吧，如果您使用的是jquery1.6 +，請使用on代替委托。

$("#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元素

在這里擺弄

Answer 2

嘗試使用.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 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();
});

小提琴