应使用事件委托+data-id属性：在tbody上监听click，通过event.target.matches('button[data-action="delete"]')识别按钮，并用dataset.id获取任务ID，再调用deleteList(id)发起DELETE请求。
怎样给表格每行加一个删除按钮并绑定点击事件
直接在 <tr> 里放 <button> 没问题，但关键在于怎么让按钮知道“自己属于哪一行”。最稳妥的方式是用 data- 属性存行索引或唯一 ID，避免依赖 DOM 树结构（比如 rowIndex 在删行后会错乱）。
常见错误：用 document.querySelectorAll('tr').forEach(...) 给每个 <tr> 找子按钮再绑定事件——这会导致每次增删行都要重绑，且容易内存泄漏。
- 推荐用事件委托：在
<table>或<tbody>上监听click，用event.target.matches('button[data-action="delete"]')判断是否点中删除按钮 - 按钮必须带明确标识，例如：
<button type="button" data-action="delete" data-id="123">删</button> -
data-id值应来自后端或初始化时生成，不要用tr的index，否则删除第 2 行后，原第 3 行的index变成 2，但数据没变，逻辑就对不上
删除按钮点击后如何安全移除对应行
别直接调 row.remove() 就完事。如果表格用了框架（如 Vue/React），DOM 操作会和视图状态脱节；即使纯 JS，也要考虑后续数据同步、空表提示、撤销机制等。
典型陷阱：用 event.target.closest('tr').remove() 看似简洁，但如果按钮被包裹在 <td> 或其他元素里，closest('tr') 可能返回 null（比如按钮外层有 <div>）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 确保按钮父级链上一定有
<tr>，或者统一用event.target.closest('tbody').querySelector(`tr[data-id="${id}"]`)定位，更可靠 - 删除前建议加简单确认：
if (!confirm('确定删除？')) return，尤其生产环境 - 删完记得同步维护 JS 中的数据数组，比如
items = items.filter(item => item.id !== id)，否则下次渲染或导出数据会出错
为什么 type="button" 不能省略
表格里放 <button> 默认是 type="submit"。如果表格在 <form> 内，点任何删除按钮都会触发表单提交，页面刷新或跳转——这是最常被忽略的坑。
- 务必显式写
type="button"，哪怕看起来“多此一举” - 不写
type时，不同浏览器行为一致，但后果严重：Chrome/Firefox/Safari 全部按 submit 处理 - 检查已上线页面：右键审查元素，看按钮的 computed
type是否为submit，是的话立刻补上type="button"
移动端点击区域太小怎么办
按钮默认尺寸在手机上难点击，单纯加 padding 不够——用户手指按在文字周围空白处，事件可能不触发，因为 <button> 的 hit area 没撑开。
- 用 CSS 把按钮设为块级并占满
<td>：display: block; width: 100%; height: 100%; border: none; background: transparent; - 配合
line-height和text-align: center居中文字，视觉上还是小按钮，但实际可点区域是整格 - 避免用
font-size: 0+::after伪元素画图标，那样触控反馈难控制，也不利于屏幕阅读器
行操作看似简单，但删错数据、误提交、移动端点不中、删了界面不更新……这些问题全集中在按钮绑定和 DOM 定位这两个环节。真正麻烦的不是写几行代码，而是删之前有没有唯一标识、删之后有没有状态同步、删的动作有没有防手抖机制。
