Jquery 编辑并删除动态创建的列表项

我已经注意到stackoverflow上关于这个问题的其他线程，但它们似乎都没有足够接近我的问题，让我找到解决方案

我的情况是，我在jquery中创建了一个“待办事项”列表。通过将项目添加到列表中来动态创建项目

当您将鼠标悬停在“我的程序”中的“待办事项”上时，您可以选择编辑“待办事项”或将其从列表中删除

$(document).ready(function(){
var itemCount=0;

$("#addButton").on('click',function(e){
    e.preventDefault();
    var toDoItem= $(".tempText").val();
    $("#todoList").append('<li>'+toDoItem+'<a href="#" class="edit">'+ "&nbsp;&nbsp;Edit me&nbsp;" +'</a><a href="#" class="remove">'+"&nbsp;&nbsp;&nbsp;Remove Me&nbsp;"+'</a></li>');
    $('li').addClass('toDoItem')

    itemCount=itemCount+1;
    $("#count").text(itemCount);
    return(false);
    /*$("#count").text=("li").length;*/
});
    $("#clearButton").on('click',function(e){
    e.preventDefault();
    $("li").remove();
    itemCount=0;
    $("#count").text(itemCount);
    return(false);
});


$("ul").on('click','li', function(){
    $(this).remove( );

    });

$（文档）.ready（函数（）{
var itemCount=0；
$（“#添加按钮”）。在（'click'，函数（e）{
e、 预防默认值（）；
var toDoItem=$（“.testext”）.val（）；
$（“#todoList”）.append（“
”+toDoItem+”
”）；
$（'li'）.addClass（'toDoItem'））
itemCount=itemCount+1；
$（“#计数”）.text（itemCount）；
返回（假）；
/*$（“#计数”）.text=（“li”）.length*/
});
$（“#clearButton”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（“li”）.remove（）；
itemCount=0；
$（“#计数”）.text（itemCount）；
返回（假）；
});
$（“ul”）。在（'click'，'li'，函数（）上{
$（this.remove（）；
});

}))； 当我单击“删除”链接或“编辑”链接时，两者都将删除该项目。我只希望“删除”来处理删除项目的问题。有什么建议吗

---

我已经阅读了有关活动授权的页面，但它们似乎没有让我有所收获

将处理程序注册到

li

而不是将其添加到删除链接（

.remove

），然后在处理程序中找到元素的

li

祖先并删除它

$("ul").on('click', '.remove', function () {
    $(this).closest('li').remove();
    //or $(this).parent().remove(); since the `li` is the direct parent of the link
});

演示：

---

现在的问题是，您正在将处理程序绑定到

li

元素，因此任何单击

li

元素（包括任何降序元素）都将触发处理程序。

太好了！谢谢你，阿伦。我只是不明白，如果我使用“this”，为什么我必须使用最接近的方法。为什么jquery不知道我已经指定了特定的'li'？