ol不支持批量删除，需逐个移除li节点；推荐querySelectorAll+remove()、按索引删或属性筛选删；删空后应移除ol本身，并同步更新计数文案。
ol 本身不支持“批量删除”操作——它只是个容器标签，真正要删的是它的子元素 li。所谓“批量删除”，本质是批量移除 ol 下的多个 li 节点，而不是删 ol 自身。
用 querySelectorAll + remove() 精准删指定 li
别用 innerHTML = '' 清空整个 ol，那会丢掉所有子节点状态（比如已绑定的事件、输入框内容、展开态）。直接定位要删的 li 并逐个调用 remove() 最稳妥：
- 给目标
li加统一 class（如to-delete），再执行document.querySelectorAll('ol li.to-delete').forEach(el => el.remove()) - 按索引删：例如删前 3 项，
Array.from(ol.children).slice(0, 3).forEach(li => li.remove())（注意ol.children只含li，安全） - 删带特定属性的项：
ol.querySelectorAll('li[data-status="archived"]').forEach(li => li.remove())
删完记得检查 ol 是否变空
如果删光了所有 li，ol 就成了空容器。虽然合法，但语义上已无意义，建议一并移除：
- 删完后加判断：
if (ol.children.length === 0) ol.remove() - 避免留空
ol导致 CSS 选择器意外命中（比如ol:empty样式未预期触发） - 若该
ol是动态渲染入口（如配合template或框架 v-for），空后需重置数据源，否则下次渲染可能重复挂载
用 replaceChildren() 替代循环 remove() 更简洁
现代浏览器支持 ol.replaceChildren(...filteredLiNodes)，一次性替换全部子节点。适合“保留部分、剔除其余”的场景：
- 先收集要保留的
li：const kept = Array.from(ol.children).filter(li => !li.classList.contains('deleted')) - 再替换：
ol.replaceChildren(...kept) - 比多次
remove()少一次 DOM 重排，性能略优；但兼容性要求 Chrome 86+ / Firefox 76+ / Safari 14+
最易被忽略的是：删 li 后，若页面依赖 ol 的计数（比如显示“共 5 项”），这个数字不会自动更新——你得手动同步更新对应文案或数据状态，否则用户看到的和实际 DOM 不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
