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