javascript - 使用 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;
    });
});

我想做的是允许用户通过单击相应的按钮“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用于将事件绑定(bind)到动态添加的元素。

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