必须用 document.querySelectorAll('tbody inputtype="checkbox":checked:not(:disabled)') 获取真实勾选项，聚合 ID 单次提交删除请求，逐行 remove() 更新 DOM，点击前/发送前/成功后三节点严格校验与重置。
怎么用 querySelectorAll 拿到真实勾选的复选框
别信 UI 状态，只信 DOM 当前的 :checked。很多框架（Vue/React）或手写逻辑会改数据但没同步到原生 input 的 checked 属性，导致你收集到的 ID 是“幻觉”。
必须用：document.querySelectorAll('tbody input[type="checkbox"][data-id]:checked')
- 加
tbody限定范围，避免误抓表头或全选框 - 强制要求每个复选框带
data-id，不依赖value或索引（分页/排序后索引失效） - 排除
disabled项：:not(:disabled)可加在选择器末尾，否则用户看到“已选 5/5”，实际只有 3 条能删
批量发请求时为什么不能循环调用 fetch
循环发请求不是慢的问题，是状态断裂风险——用户点一次“删除”，前端可能发 8 个请求，其中第 3 个失败、第 5 个超时，后端部分数据已删，前端界面却还显示全选中，再点一次就重复删或报 404。
正确做法是聚合 ID 后单次提交：fetch('/api/items/delete', { method: 'POST', body: JSON.stringify({ ids: ['101', '205', '317'] }) })
- 后端必须支持批量接口；不支持就加一层代理，别把并发逻辑甩给前端
- 前端要加 loading 锁：按钮点击后
disabled = true，防止连点 - 如果某条 ID 删除失败（如权限不足），后端应返回具体失败列表，前端用
data-id定位对应行，加class="delete-failed"提示，而不是整批回滚
删完之后 DOM 怎么更新才不丢事件和焦点
用 innerHTML = '' 重绘整张表是最省事的写法，也是最伤用户体验的：编辑中的输入框内容消失、滚动位置跳回顶部、自定义下拉菜单关闭、所有 JS 绑定的事件监听器丢失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
必须逐行精准移除：el.closest('tr')?.remove()
- 先用
Array.from(checkedInputs).map(cb => cb.closest('tr'))收集所有待删tr元素引用（不是 ID 字符串） - 按从底向上顺序
.remove()，避免 DOM 结构变化导致后续closest找错行 - 删完立刻清空所有复选框状态：
checkedInputs.forEach(cb => cb.checked = false)，否则用户再点“删除”会发空数组 - 如果表格用了虚拟滚动或分页，记得同步更新
data-total或全局计数器，不然“共 12 条”下面只剩 1 条还显示“下一页”
误删防护关键在哪几个动作节点
误删不是发生在点击按钮那一刻，而是在三个节点松动：校验缺失、确认跳过、状态残留。
每个节点都得硬控制：
- 点击前：检查
checkedInputs.length === 0，直接return，不弹 alert 也不发请求 - 发送前：弹出轻量确认浮层（非
confirm()），显示“将删除 3 项”，并附取消按钮；禁用按钮本身，防手抖 - 成功后：不仅删 DOM、清勾选，还要检查表格是否为空，自动插入
暂无数据
最容易被跳过的其实是最后一步——删完不重置复选框，下次点就删空数组，后端可能返回 200 但什么都没做，用户以为功能坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
