用事件委托实现行内删除：将点击监听绑定在tbody上，通过e.target判断是否点击.btn-delete按钮，再用closest('tr')定位并移除对应行；需确保HTML中tr有data-id、按钮有统一类名；可加confirm确认、防编辑冲突，并支持隐藏+缓存实现撤销功能。
用事件委托实现可编辑表格的行内删除，核心是：把删除按钮的点击监听绑定在表格（table）或 tbody 上，而不是每个按钮单独绑定；点击时通过事件对象的 target 判断是否点中了某个“删除”按钮，再定位到对应行并移除。
1. HTML 结构要支持委托
确保每行都有明确标识（比如 data-id），删除按钮用统一类名（如 btn-delete），不依赖 ID：
<tbody>
<tr data-id="1">
<td>张三</td>
<td>25</td>
<td><button class="btn-delete">删除</button></td>
</tr>
<tr data-id="2">
<td>李四</td>
<td>30</td>
<td><button class="btn-delete">删除</button></td>
</tr>
</tbody>
</table>
2. 绑定事件委托监听
在 tbody 上监听 click，检查 event.target 是否为删除按钮，并向上找最近的 <tr>：
- 用
closest('tr')安全获取所在行（兼容嵌套结构） - 用
dataset.id可选地获取该行业务 ID，用于后续 API 删除 - 调用
row.remove()直接从 DOM 移除整行
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('btn-delete')) {
const row = e.target.closest('tr');
if (row) {
// 可选：发送删除请求
// fetch(`/api/users/${row.dataset.id}`, { method: 'DELETE' })
// .then(() => row.remove());
row.remove();
}
}
});
3. 注意可编辑状态下的交互安全
如果表格单元格支持双击编辑（如转为 input），需避免误删：
立即学习“Java免费学习笔记（深入）”；
- 删除按钮点击应阻止默认行为（通常不需要，但若按钮在表单内建议加
e.preventDefault()） - 可在点击前加确认提示：
if (!confirm('确定删除这行？')) return; - 若编辑中（某单元格含
input:focus），可临时禁用删除逻辑，或 blur 后再删
4. 扩展：支持批量删除或撤销
想支持“撤回删除”，不要直接 remove()，而是加 CSS 隐藏 + 缓存数据：
- 给行添加临时类
deleted并设display: none - 用数组暂存被删行的
outerHTML或数据对象 - 提供“撤销”按钮恢复最后一条，或“清空回收站”彻底删除
