应使用 closest('tr') 获取整行元素；用 data-id 而非行号确保数据绑定可靠；事件委托可避免重复绑定；删除 dom 同时必须同步更新内存数组及后端状态。
点击删除按钮时，如何准确拿到整行 <tr> 元素？
<p>不能只写 <code>el.parentElement.remove()——它删的是 <td>，不是整行。关键在于从按钮出发，向上找最近的 <code><tr>，而不是硬数几层 <code>parentElement。
推荐用 closest() 方法，它会逐级向上匹配选择器，语义清晰、抗 DOM 结构变化：
function deleteRow(btn) {
const tr = btn.closest('tr');
if (tr) tr.remove();
}
如果浏览器需兼容 IE（已基本淘汰），才退而求其次用 btn.parentElement.parentElement，但必须确认中间没有插入额外 wrapper（比如加了 <div> 包裹按钮）。
<h3>为什么用 <code>data-id 比用行号更可靠？
靠 rowIndex 或循环遍历 tbody.children 找第 N 行，容易在增删后错位。尤其当表格支持排序、筛选或分页时，视觉顺序 ≠ DOM 顺序。
正确做法是在生成每行时，把业务唯一标识（如数据库 id）存进 tr 或按钮的 data-id：
<tr data-id="123"> <td>张三</td> <td><button onclick="del(this)" data-id="123">删除</button></td> </tr>
删除函数里直接读取：const id = btn.dataset.id。这样无论表格怎么重排、怎么分页，ID 始终绑定数据本体。
事件委托下怎么区分哪个按钮被点了？
不给每个按钮单独绑 onclick，而是统一监听 tbody，靠 event.target 判断是否点中了删除按钮：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听器注册：
document.querySelector('tbody').addEventListener('click', handleDelete) - 判断条件：
if (e.target.matches('.btn-delete'))或e.target.classList.contains('btn-delete') - 获取目标行：
e.target.closest('tr')，再取dataset.id
好处是动态添加的行无需重新绑定事件，也不会因频繁创建/销毁监听器导致内存泄漏。
删完行，为什么数据数组没同步？
DOM 删除和内存数据删除是两回事。常见错误是只调 tr.remove()，却忘了从维护的数组里 splice() 对应项。
典型修复方式：
- 删前先查：用
dataset.id在数组里找索引，arr.findIndex(item => item.id == id) - 删后同步：
if (index !== -1) arr.splice(index, 1) - 避免副作用：不要在
forEach里直接删数组，会导致漏删
真正容易被忽略的点是：删除操作往往还涉及后端 API 调用，fetch(...).then(() => arr.splice(...)) 必须确保请求成功后再更新本地状态，否则会出现“界面删了但数据还在”的幻觉。
