刪除動態生成的元素

Question

我已經為我正在使用的項目實現了一個用戶生成的關鍵字列表，使用jQueryUI自動完成來建議現有的關鍵字。

在選擇自動完成建議時，返回的字符串將添加到div的html中，作為子div。

我想添加一個刪除功能，用戶可以在錯誤輸入時刪除子div。

我已嘗試過Stackoverflow和其他地方的多個建議答案，但似乎無法使其正常工作。

我創造了一個包含相關元素的小提琴 。

對我來說最合乎邏輯的解決方案是：

$('.keyword-entry').click(function(e){
    var id = $(this).closest('div').prop('id');
    $('#'+id).remove();
}

雖然看起來這不起作用。

雖然能夠解決這個問題，但是為了節省我今天晚上用完的咖啡供應減少，我還要感謝我為什么會出錯。

提前致謝。

Answer 1

活動代表團。

基本上，您正在嘗試將事件附加到加載時DOM中不存在的DOM元素。 同樣重寫.click()處理程序：

$(document).on('click', '.trashYes', function () {
    $(this).remove();
});

小提琴： http ： //jsfiddle.net/6bBU4/

它正在做的是，它將.click()事件附加到document （最頂層的DOM元素）將向下移動以找到任何新的.trashYes ，從而成功執行.remove() 。 這不必綁定到document而是綁定到document中的任何DOM元素以及加載時。

Answer 2

不需要獲取id然后嘗試再次找到它，就這樣做...

$('<div id="'+id+'" class="keyword-entry" style="z-index:0">'+ui.item.value+'   <--I want to remove this</div>')
    .appendTo($('#keyword-list'))
    .click(function(e){
        $(this).remove();
    });

添加關鍵字條目時