按鈕使用JQuery

Question

刪除動態創建的列表元素我在HTML有序列表：

<ol id ="list"> 
</ol> 

它被添加到使用JQuery/JavaScript的：

$(function(){ 
    $("#click-me").click(function (e){ 
     e.preventDefault(); 
     i++; 

     var list = $("#list"); 
     var name = $("#colleague-select option:selected").text(); 
     var remove = "<button type='button' class='remove-me'> X </button>"; 
     var entry = "<li>" + name + remove+ "</li>"; 
     entry.id = "entryid" + i; 

     list.append(entry); 

     return false; 
    }); 
}); 

我想什麼do是允許用戶通過點擊其相應的按鈕「X」來刪除列表中的條目。這是我想出的代碼，但它不工作：

$(function(){ 
    $(".remove-me").click(function(e){ 

     var list = $("#list"); 
     var entry = e.parent(); //find parent entry of clicked "X" button 
     list.remove(entry); //remove entry from list 
    }); 
}); 

任何幫助傢伙？我對JQuery相當陌生，因此非常感謝你的答案代碼的解釋。謝謝。

Answer 1

您需要使用event delegation將事件綁定到動態添加的元素。

$(document).on('click', ".remove-me", function(e){ 
    var entry = $(this).parent(); 
    entry.remove(); //remove entry from list 
}); 

Answer 2

只是刪除parent元素

$(function(){ 
    $(document).on("click", ".remove-me", function(e){ 
     $(this).parent().remove(); //find parent entry of clicked "X" button 
    }); 
}); 

Answer 3

一個萬無一失的方法是事件添加到按鈕

<button type='button' onclick='removeMe(this);' class='remove-me'> X </button> 

和JS

function removeMe(e) 
{ 
    $(e).parent().remove(); 
}