动态购物列表中Delete按钮如何识别对应<li>元素？

1. 为什么点击Delete按钮能精准删除对应

#

核心原因是箭头函数的闭包特性。每次点击添加按钮时，都会生成一个独立的作用域：在这个作用域里创建了当前购物项的li、文本span和Delete按钮，紧接着给Delete按钮绑定点击事件时，用箭头函数() => li.remove()捕获了当前作用域里的li变量。

每个Delete按钮的点击事件，都“记住”了自己所属的那个li实例——这和DOM嵌套无关，完全是闭包让每个按钮拿到了专属的li引用，所以点击时只会删除对应的那一项。

2. 是否因为按钮嵌套在

内？ #

不是。嵌套只是你现在的DOM结构写法，真正起作用的是闭包对li变量的捕获。就算把Delete按钮放到li的子元素里（比如span内部），甚至放到<ul>外的其他容器里，只要绑定事件时能捕获到当前的li引用，依然能精准删除。

举个修改结构的例子，代码依然有效：

const list = document.querySelector("ul");
const input = document.querySelector("#item");
const btn = document.querySelector("button");

btn.addEventListener("click", function () {
    const inputText = input.value;
    input.value = "";
    const li = document.createElement("li");
    const span = document.createElement("span");
    const btnElement = document.createElement("button");
    
    list.appendChild(li);
    li.appendChild(span);
    span.appendChild(btnElement); // 把按钮放到span内部，不再是li的直接子元素
    
    span.textContent = inputText;
    btnElement.textContent = "Delete";
    btnElement.addEventListener("click", () => li.remove()); // 依然能删除对应的li
    input.focus();
});

3. 如果按钮嵌入其他元素，还能删除对应

吗？ #

当然可以，有两种常用实现方式：

• 闭包捕获法：就像你现在的写法，不管按钮在DOM里的位置，只要绑定事件时能拿到对应li的引用，直接调用remove()即可。
• DOM遍历法：如果按钮和li存在层级关联（比如按钮是li的后代），可以通过DOM API找到对应的li。比如用closest()方法获取最近的父级li：

  btnElement.addEventListener("click", function() {
    const targetLi = this.closest("li");
    if (targetLi) targetLi.remove();
  });
  

这种写法不依赖闭包，完全通过DOM结构关系定位li，哪怕按钮被移到li的任意后代位置，都能精准找到并删除目标项。

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