应使用事件委托，在稳定父容器上绑定一次点击事件，通过event.target.closest()精准定位目标元素并同步更新数据。

直接在父容器上绑定一次点击事件，用 event.target 找到真正被点的元素——这样新添加的列表项不用额外操作就能响应点击，根本不用反复绑监听器。

为什么动态列表项点不了？

常见错误是每次新增一项，就遍历所有删除按钮或操作按钮，挨个调用 addEventListener。问题在于：新插入的 DOM 节点不在原有遍历范围内，自然没绑上事件；而且老节点会越绑越多，一点就触发好几次。

本质不是“绑不上”，而是“绑错了地方”——事件委托不依赖元素是否已存在，只依赖事件能否冒泡上来。

选对父容器是关键一步

不能随便挑个父级，得选一个稳定、不会被替换、且始终包含所有目标子元素的容器。比如：

• 待办列表用 <ul id="toDoList"></ul>，就绑定到这个 ul 上
• 商品卡片网格用 <div class="product-grid">，就绑定到这个 <code>div
• 避免绑定到 document 或 body，除非实在找不到更近的静态父级

用 closest() 精准定位目标

点击发生后，事件从子元素一路冒泡到父容器。你在回调里要快速判断：这次点的到底是不是我要处理的按钮？推荐写法：

• 用 e.target.closest('.delete-btn') 判断是否点了删除按钮（支持按钮内图标、文字等任意子元素）
• 再用 deleteBtn.closest('li') 找到它所属的完整列表项，方便后续移除或读取数据
• 不用 parentNode 层层往上查，closest() 更安全、语义更清晰、兼容性也够用（IE9+）

别忘了同步更新数据

DOM 删除了，JavaScript 数组里的对应项如果没删，下次渲染就会错乱。所以委托事件里要同步处理：

• 先通过 Array.from(parent.children).indexOf(todoItem) 算出当前项在数组里的索引
• 再用 arr.splice(index, 1) 把数据删掉
• 这步不能省，否则视图和状态就脱节了