事件委托实现多选标签逐个移除，核心是父容器监听click事件，通过e.target.closest()精准定位被点击的删除按钮及对应标签项并移除，同时支持data属性同步数据、键盘操作和自定义事件。
事件委托处理多选标签（如带删除按钮的标签列表）的逐个移除，核心是利用事件冒泡，把删除逻辑绑定在父容器上，而不是每个删除按钮单独绑定。这样既避免动态添加标签后需重复绑定，又能精准定位被点击的是哪个标签。
父容器监听 + 事件目标识别
给所有标签的共同父元素（比如 <div class="tag-list">）绑定 click 事件，然后判断点击的目标是否为某个“删除”按钮（例如 class="tag-delete"）。通过 event.target 向上查找最近的标签容器（如 .tag-item），再将其移除。
- 确保每个标签结构清晰，例如：
<div class="tag-item">
<span>React</span>
<button class="tag-delete">×</button>
</div> - 在父容器上监听：
document.querySelector('.tag-list').addEventListener('click', function(e) {
if (e.target.classList.contains('tag-delete')) {
const tagItem = e.target.closest('.tag-item');
if (tagItem) tagItem.remove();
}
});
保留数据同步（可选但推荐）
如果标签对应一个 JS 数组（如 selectedTags = ['React', 'Vue', 'TypeScript']），仅 DOM 移除不够，还需同步更新数据。可在每个 .tag-item 上用 data-tag 属性记录值，移除时读取并过滤数组。
- 渲染时加上标识：
<div class="tag-item" data-tag="React">...</div> - 移除时同步数据：
const tagValue = tagItem.dataset.tag;
selectedTags = selectedTags.filter(t => t !== tagValue);
防止误触发与边界处理
注意按钮可能嵌套在其他元素中（如 <span><button>×</button></span>），所以优先用 e.target.closest('.tag-delete') 而非直接检查 e.target；同时确保 .tag-item 存在再操作，避免报错。
立即学习“Java免费学习笔记（深入）”；
- 安全写法：
const deleteBtn = e.target.closest('.tag-delete');
if (!deleteBtn) return;
const tagItem = deleteBtn.closest('.tag-item');
if (!tagItem) return;
tagItem.remove(); - 可顺手触发自定义事件（如
'tag-removed'），便于外部响应
支持键盘辅助（提升可用性）
为每个删除按钮添加 role="button" 和 tabindex="0"，并监听 Enter 或 Space 键，让键盘用户也能操作。
- HTML 示例：
<button class="tag-delete" role="button" tabindex="0">×</button> - 补充键盘事件：
tagItem.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
tagItem.remove();
}
});
（注意：事件委托下需在父级统一处理，或改用事件捕获阶段）
