批量删除td需用querySelectorAll精准定位，如'td.deprecated'；删除时应转静态数组再操作以防漏删；删后需清理空tr；隐藏仅适用于临时场景且有可访问性等限制。
用 querySelectorAll 精准定位要删的 td
批量删除的前提是准确选中——不能靠遍历所有 td 再判断，否则性能差、易误删。常见场景如：删第 3 列、删含特定类名（class="deprecated"）、删 data 属性为 data-status="inactive" 的单元格。
推荐写法：
document.querySelectorAll('table td:nth-child(3)') // 删第3列
document.querySelectorAll('td.deprecated')
document.querySelectorAll('td[data-status="inactive"]')
注意：nth-child(n) 是按父元素（tr）下的位置算的，不是整表第 n 列；若某行 td 数量不一致，可能错位。更稳的方式是加 colspan/rowspan 排查或用 Array.from() 后过滤。
删除时别直接调用 remove() 就完事
看似简单：循环调用 td.remove() 即可。但 DOM 节点列表是“实时集合”，边删边遍历会导致漏删——比如删掉索引 0 的 td 后，原索引 1 的自动前移成 0，而循环下标已跳到 1，就跳过了新位置 0 的节点。
安全做法只有两种：
- 从后往前遍历（倒序
for循环） - 先转成静态数组再删：
Array.from(nodeList).forEach(td => td.remove())
推荐后者，语义清晰、不易出错。例如：
const targets = document.querySelectorAll('td[data-flag="delete"]');
Array.from(targets).forEach(td => td.remove());
删完记得检查 tr 是否空，避免残留空行
单纯删 td 不等于删数据行。如果某 tr 下所有 td 都被删光，该行会变成 border-collapse: collapse 时可能显示细线），且影响后续 JS 操作（如 tr.cells.length 为 0）。
建议顺手清理空行：
document.querySelectorAll('tr').forEach(tr => {
if (tr.cells.length === 0) tr.remove();
});
注意：tr.cells 是只读 HTMLCollection，比 tr.querySelectorAll('td, th').length 更轻量、兼容性更好（IE9+ 支持）。
用 display: none 替代删除？小心样式和语义陷阱
有些场景其实不需要真删 DOM，只想隐藏——比如做临时筛选、响应式折叠列。这时设 style.display = 'none' 更快，但有三个硬伤：
- 屏幕阅读器仍能读取，不符合可访问性要求（应配合
aria-hidden="true"） - 表格结构语义断裂：
colspan和列对齐可能错乱 - 后续用
getBoundingClientRect()或offsetTop获取位置时返回 0，干扰布局计算
结论：仅当明确接受这些限制、且操作需高频切换时才用隐藏；批量清理数据或持久化修改，必须用 remove()。
真正麻烦的不是怎么删，而是删完之后表格的列宽自适应突然失效、合并单元格错位、或者服务端渲染时没同步删对应数据——这些都得在删 td 前确认好上下文约束，而不是指望 DOM 操作自己兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
