用 closest('tr') 删除表格整行，从按钮出发向上查找最近的并移除；事件委托绑定到，通过e.target.classlist.contains判断按钮，支持动态渲染；删除前需confirm并调api，成功后remove，data-id存唯一标识；合并单元格或复杂布局下仍有效。
用 closest 删除表格整行，核心是：**从被点击的按钮出发，向上找最近的 <tr>，然后移除它**。不需给每行加 ID，也不用手动遍历父级，简洁又健壮。
<h3>绑定事件到「委托容器」，而非每个按钮</h3>
<p>后台表格常动态渲染（如分页、搜索后重绘），直接给按钮绑 click 会失效。推荐用事件委托：</p>
<ul><li>把事件监听器挂在 <code><tbody> 或整个 <code><table> 上
<li>用 <code>e.target 判断是否点中了带特定 class（如 btn-delete）的按钮
用 closest('tr') 精准定位目标行
按钮可能嵌套在 <td>、<code><div> 甚至 <code><span></span> 里，closest('tr') 自动沿祖先链向上查找，直到找到第一个 <tr>，比 <code>parentNode.parentNode 更安全可靠：
document.querySelector('tbody').addEventListener('click', function(e) {
if (e.target.classList.contains('btn-delete')) {
e.target.closest('tr').remove(); // ✅ 一行搞定
}
});
删除前加确认，并支持服务端同步
真实场景不能直接删，要加提示 + 调 API。可这样增强：
- 在按钮上用
data-id存该行唯一标识（如<button data-id="123">删</button>） - 点击时先
confirm()，再取e.target.dataset.id发请求 - 成功后再执行
closest('tr').remove()，失败则提示错误
注意边界情况：合并单元格或自定义结构
如果表格用了 rowspan 或行内有复杂布局（如卡片式 <tr>），<code>closest('tr') 依然有效——它只认 DOM 结构，不依赖视觉布局。但需确保按钮确实在某个 <tr> 内部（这是 HTML 表格规范要求）。若用 div 模拟表格，请把 <code>closest 改为 closest('.table-row') 并统一加 class。
