事件委托实现动态表单项删除的核心是将点击监听绑定在稳定父容器上，通过target识别删除按钮并closest定位对应.item容器，确保新增项自动生效、删除同步更新数据与DOM，兼顾兼容性与防误操作。
事件委托实现动态表单项删除，核心是把删除事件监听绑定在父容器上，而不是每个动态生成的删除按钮上。这样新增或删除表单项时，无需反复绑定/解绑事件，代码更简洁、性能更好。
用事件委托监听删除按钮点击
给所有动态生成的表单项外层容器（比如 <div class="item">）加一个统一的父级容器，比如 <div id="form-list">。然后只在这个父容器上监听 click 事件，通过事件对象的 target 判断是否点中了某个“删除”按钮。
- 确保每个删除按钮有可识别的特征，例如统一的 class 名（如
class="delete-btn"）或 data 属性（如data-action="delete"） - 利用
e.target获取实际点击的元素，再用closest()向上查找最近的表单项容器（如.item），避免误删 - 删除前建议加确认提示，防止误操作
动态添加表单项时不用重新绑定事件
每次通过 JavaScript 动态插入新表单项（比如点击“添加”按钮后拼接 HTML 或用 document.createElement 创建），只要结构符合约定（如包含 .delete-btn 和外层 .item），已存在的事件委托自动生效，无需额外操作。
- 推荐用模板字符串或 DOM 方法创建元素，保持结构一致性
- 不要在添加后对新按钮单独调用
addEventListener，否则会破坏委托逻辑，还可能造成重复绑定 - 如果用了框架（如 React/Vue），注意事件委托和框架响应式机制的兼容性；纯原生场景下完全适用
删除时正确移除对应 DOM 并更新数据
点击删除按钮后，不仅要从页面移除对应表单项，通常还需同步更新维护表单数据的数组或对象，避免提交时残留无效项。
立即学习“Java免费学习笔记（深入）”；
- 用
target.closest('.item').remove()直接删 DOM 节点 - 如果用数组存字段数据，可通过索引或唯一 id 匹配并
splice()删除对应项 - 删除后可触发自定义事件（如
dispatchEvent(new Event('itemDeleted'))）通知其他逻辑更新状态
兼容性与常见坑点提醒
closest() 在 IE 中不支持，如需兼容旧浏览器，可用 polyfill 或改用遍历父节点的方式；另外注意委托目标不能是 document 或 body 级别，否则可能捕获到非预期点击。
- 委托容器必须是所有动态项的稳定共同父级，且不能被 JS 清空重绘，否则监听就失效
- 避免给按钮本身设
event.stopPropagation()，否则委托收不到事件 - 表单项内如有其他可点击元素（如下拉、复选框），要确保
target判断足够精确，推荐用matches()配合closest()
