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

我尝试做的是允许用户通过点击相应的按钮＆＃34; X＆＃34; 来删除列表中的条目。这是我提出的代码，但它不起作用：

$(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();
}