使用jQuery移除点击的动态生成列表项问题求助

嘿，我明白你遇到的困扰了——动态添加的列表项没法通过点击删除，对吧？这其实是jQuery事件绑定里一个很常见的小坑，我来给你捋清楚：

为什么原来的方法无效？ #

你注释掉的两段代码都是直接给<li>绑定点击事件：

$("li").click(function() {
  $(this).remove();
});

或者

$('li').click(function(e){
  $(e.target).remove();
});

这些代码是在$(document).ready()阶段执行的，也就是页面加载完成时就给当时存在的<li>绑定了事件。但你通过#save按钮添加的<li>是后续动态生成的，在页面初始化时根本不存在，所以这些新的列表项不会被绑定上点击事件，自然没法触发删除逻辑。

而页面一开始就存在的元素（比如h1）能正常触发事件，就是因为它们在初始化时就已经存在，事件绑定成功了。

解决方法：使用事件委托 #

要让动态生成的元素也能触发事件，你需要用jQuery的事件委托机制——把事件绑定到一个已经存在的父元素上，让父元素监听子元素的事件。

把你注释掉的代码替换成下面这段：

$("#contacts").on("click", "li.contact", function() {
  $(this).remove();
});

这段代码的作用： #

1. 我们把点击事件绑定到已经存在的父元素#contacts（你的列表容器）上
2. 第二个参数"li.contact"是事件触发的目标选择器——只有当点击的元素是这个选择器匹配的子元素时，才会执行回调
3. 回调里的$(this)就是被点击的那个列表项，执行remove()就能删除它

这样不管是页面初始化时就有的列表项，还是后来通过#save按钮动态添加的，只要是#contacts下面的li.contact，点击都会触发删除操作。

另外提个小细节：你的#delBtn按钮文本写的是"Add"，但功能是删除所有列表项，可能是笔误，不过不影响当前问题~

内容的提问来源于stack exchange，提问作者Happy Coconut