批量删除tr行应先用querySelectorAll精准选中并转为静态数组再remove()，避免实时HTMLCollection导致漏删；需注意兼容性、事件解绑和状态清理。
用 document.querySelectorAll 选中并移除指定 tr 行
批量删 tr 的核心是先精准选中，再统一调用 remove()。别用 innerHTML = '' 清空整个 tbody，那会丢失事件监听器和动态状态。
常见错误：写 document.getElementsByTagName('tr') 后直接遍历删除——这会导致“漏删”，因为 HTMLCollection 是实时的，删掉第一个后，原第二个立刻变成第一个，索引就乱了。
正确做法是先转成静态数组再删：
const rows = Array.from(document.querySelectorAll('#myTable tbody tr'));
rows.forEach(row => row.remove());
如果只删带特定类的行：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('#myTable tr.deleted').forEach(tr => tr.remove());
用 querySelectorAll 配合伪类或属性筛选条件行
实际业务中很少无差别全删，多数要按条件过滤。比如删空行、删禁用行、删 ID 包含特定字符串的行。
- 删所有第 2 列为空的行：
tr:has(td:nth-child(2):empty)（注意：:has在 Safari 15.4+ 和 Chrome 105+ 支持，旧版需降级） - 删
data-status="inactive"的行：tr[data-status="inactive"] - 删 ID 以
temp-开头的行：tr[id^="temp-"]
兼容性提醒：若需支持 IE 或老 Chrome，避免用 :has，改用 JS 过滤：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
Array.from(document.querySelectorAll('#myTable tr'))
.filter(tr => tr.cells[1]?.textContent.trim() === '')
.forEach(tr => tr.remove());
删除前保留 DOM 引用或触发清理逻辑
直接 remove() 很快，但容易忽略副作用。比如某行绑定了自定义事件、用了第三方插件（如 DataTables）、或内部有定时器/订阅。
安全做法是先“解绑再删”：
- 用
row.__customData存过状态？删前手动清空：delete row.__customData - 用了
addEventListener？建议统一用事件委托，否则删前得row.removeEventListener - 行内有
setInterval？应在删前调用clearInterval(row.timerId)
没做这些，可能造成内存泄漏或后续脚本报错 Cannot read property 'xxx' of null。
用 removeChild 替代 remove 的兼容性兜底
remove() 在 IE 完全不支持，Edge 12–18 也不支持。如果项目还需兼容这些环境，必须用传统方式：
const tbody = document.querySelector('#myTable tbody');
const rows = tbody.querySelectorAll('tr');
while (rows.length > 0) {
tbody.removeChild(rows[0]);
}
注意：rows 是实时集合，所以不能用 for (let i = 0; i ，否则又会漏删。用 <code>while 最稳。
另外，removeChild 必须明确指定父节点，不能对 tr 直接调，这点比 remove() 烦琐，但可控性更强。
真正麻烦的不是怎么删，而是删完之后表格结构是否还合法——比如删光了 tbody，但 CSS 里写了 tbody tr:last-child，样式就失效了；或者服务端预期总有至少一行，前端删空后没同步校验，后续提交就出错。
