JavaScript动态创建列表：点击垃圾桶删除对应项失效求助

你遇到的问题根源在于deleteIt函数里的document.querySelector('.list_element')——这个方法只会返回页面中第一个匹配.list_element类的元素，所以不管你点击哪个垃圾桶，都会删除第一个列表项。

结合你用到的事件冒泡，推荐两种简单的修复方式：

方式一：利用事件对象e定位对应列表项 #

修改事件监听逻辑，通过点击的垃圾桶图标找到它所属的父级<li>：

document.addEventListener('click', function(e){
    if(e.target.classList.contains('image')){
        // 从点击的垃圾桶向上查找最近的列表项
        const targetLi = e.target.closest('.list_element');
        targetLi.remove();
    }
});

closest('.list_element')会从当前元素开始向上遍历DOM树，找到最近的匹配选择器的父元素，比直接用parentElement更健壮——哪怕后续你给垃圾桶加了外层容器，依然能准确找到对应的列表项。

方式二：使用this关键字 #

在事件处理函数里，this指向触发事件的元素（也就是被点击的垃圾桶图标），可以通过它直接获取父级列表项：

document.addEventListener('click', function(e){
    if(e.target.classList.contains('image')){
        this.parentElement.remove();
    }
});

这里的this就是当前被点击的.image元素，parentElement直接获取它的父节点<li>，执行删除即可。

你用事件冒泡来监听动态元素的点击是正确的思路——因为通过addFun新增的列表项是动态创建的，没法提前给它们绑定事件，借助事件冒泡机制，给document绑定监听就能捕获到所有动态元素的点击事件。

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