jQuery創建後刪除元素

我正在構建一個jQuery可排序列表，其中用戶可以從表中添加項目，拖動和排序和/或刪除他們。我可以添加和排序沒有問題，但我不能解決如何刪除項目元素添加後。我對js/jQuery相對來說比較陌生，所以我有一種感覺，在這裏學到一些關於它如何工作的新東西！jQuery創建後刪除元素

我會離開這裏了ui.sortable的東西，我只關心刪除項目..

<table> 
    <tr> 
    <td><a class="addrelease" href="#" cat_id="1">add</a></td> 
    <td>Item 1</td> 
    </tr> 
    <tr> 
    <td><a class="addrelease" href="#" cat_id="2">add</a></td> 
    <td>Item 2</td> 
    </tr> 
</table> 

<div id="list"></div> 

<script> 
$("a.addrelease").click(function (e) { 
    e.preventDefault(); 
    cat_id  = $(this).attr('cat_id'); 
    remove_str = " <a href=\"#\" class=\"remove\">remove</a>"; 
    str  = cat_id + remove_str; 
    $(str).appendTo("#list").hide().fadeIn(); 
}); 
$("a.remove").click(function (e) { 
     alert("This function doesn't seem to be called"); 
     $(this).parent().remove(); //Doesn't happen.. 
}); 
</script>

我猜，JavaScript不會把所生成的新項目 - 但我不敢肯定，所以我不知道從哪裏開始修復它

乾杯

來源

2011-03-23 Alex

你應該使用實時功能附加事件動態添加元素。

試試這個綁定點擊事件a.remove元素：

$("a.remove").live("click", function (e) { 
     alert("This function doesn't seem to be called"); 
     $(this).parent().remove(); //Doesn't happen.. 
});

來源

2011-03-23 03:36:05 Chandu

啊太棒了！這就是訣竅！哇，我不知道要多久才能找到解決方案！由於 – Alex 2011-03-23 03:39:30

我想你也應該更換'$（本）.parent（）刪除（）;''由$（這）一個.remove（）;'否則整個'div'被刪除。 – 2011-03-23 03:40:39

哦，是的，你說得對 - 我忘了編輯位。生成的元素應該是這樣的，而不是：''

Item 1 remove

– Alex 2011-03-23 03:56:40

這裏是我的我是多麼想你應該修改代碼的答案：
http://jsfiddle.net/RY5CP/

<table> 
    <tr> 
     <td><a class="addrelease" href="#" rel="1">add</a></td> 
     <td>Item 1</td> 
    </tr> 
    <tr> 
     <td><a class="addrelease" href="#" rel="2">add</a></td> 
     <td>Item 2</td> 
    </tr> 
</table> 

<div id="list"></div> 

<script type="text/javascript"> 
    $("a.addrelease").click(function(e) { 
     e.preventDefault(); 
     var catId = $(this).attr('rel'); 
     var itemName = $(this).closest('td').next('td').text(); 
     var newItem = '<p>' + catId + ' ' + itemName + ' <a href="#" class="remove">remove</a>'; 
     $(newItem).appendTo('#list').hide().fadeIn(); 
    }); 

    $("a.remove").live('click', function(e) { 
     $(this).parent('p').remove(); 
    }); 
</script>

這是無效使用cat_1，cat_2作爲HTML屬性。您可以使用rel屬性，如果你需要有一個特定的值要關聯到您的項目
使用live()方法有click事件處理程序自動連接到動態創建

來源

2011-03-23 03:52:52

項目你是絕對正確，JavaScript將無法識別新項目。

jQuery選擇器通常只會匹配文檔中當前的元素。當你使用$（「a.remove」）。function（）時，jQuery建立一個匹配「a.remove」的節點列表，然後在每個節點上調用function（）。

的.live（）函數是特殊的，並且不直接連接事件元素 - 相反，事件冒泡到DOM的頂部進行評估，看看他們是否匹配選擇。

恕我直言，最好的辦法是當你創建新的列表條目刪除處理程序綁定：

str  = cat_id + remove_str; 
    var remove = $(str); 
    remove.appendTo("#list").hide().fadeIn(); 
    remove.click(function(e) { .... })

免責聲明：晚上&末類型化沒有測試！

來源

2011-03-23 04:02:11

jQuery創建後刪除元素

回答

相關問題