最简单方法是用 JavaScript 的 remove() 方法直接删除 DOM 元素。它从父节点彻底移除目标 ,不占位且序号自动重排;避免误用 innerHTML=''、display:none 或 removeChild() 调用错误;批量删除需倒序或转静态数组以防漏删。

直接用 JavaScript 的 remove() 方法最简单
HTML 本身没有“删除某项”的声明式语法,必须靠 JS 操作 DOM。最直观的方式是选中目标 <li> 元素,调用它的 remove() 方法——它会从父节点(即 <ol></ol>)中彻底移除自身,不留下空位,也不影响其余 <li> 的序号。
常见错误是误用 innerHTML = '' 或 textContent = '',这只会清空内容,<li> 标签还在,序号也不会重排。
- 要删第 3 项(索引为 2):
document.querySelector('ol li:nth-child(3)').remove(); - 要删带特定 class 的项:
document.querySelector('ol li.done').remove(); - 要删最后一条:
document.querySelector('ol li:last-child').remove();
removeChild() 虽然兼容老浏览器但更啰嗦
IE11 及更早版本不支持 remove(),得用 removeChild(),但它必须在父元素上调用,不能直接在 <li> 上调,容易写错对象。
- 正确写法(先获取父节点):
const li = document.querySelector('ol li:first-child');<br>li.parentNode.removeChild(li); - 错误写法(
removeChild()不是<li>的方法):document.querySelector('ol li:first-child').removeChild(); // TypeError - 注意:用
removeChild()后,序号依然自动重排,这点和remove()一致
别用 display: none 伪装“删除”
用 CSS 隐藏 <li>(比如 style="display: none")看起来像删了,但实际仍在 DOM 中,<ol></ol> 的计数器仍把它算进去——你看到的序号可能是 1、2、4、5,中间缺了 3。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记(深入)”;
- 这是视觉欺骗,不是真正删除
- 对屏幕阅读器、SEO、后续 JS 遍历
ol.querySelectorAll('li')都有影响 - 如果真只需要隐藏,务必同时加
aria-hidden="true"并考虑语义合理性
批量删多项时注意 NodeList 是“活的”
用 querySelectorAll('ol li') 获取所有项再循环删除,容易因 DOM 实时变化导致漏删或报错——因为每次 remove() 后,后续元素索引前移,而 NodeList 不会自动更新(但 getElementsByTagName 返回的是“活的”集合,问题更严重)。
- 安全做法:倒序删(从最后一个开始):
const items = document.querySelectorAll('ol li');<br>for (let i = items.length - 1; i >= 0; i--) {<br> items[i].remove();<br>} - 或者转成静态数组:
[...document.querySelectorAll('ol li')].forEach(li => li.remove()); - 用
while (ol.firstChild) ol.removeChild(ol.firstChild);清空整个列表也比遍历更稳
删 <li> 看似简单,关键在区分“隐藏”和“移除”、注意方法兼容性、避开动态集合陷阱。序号重排是浏览器自动行为,不用手动干预,但前提是真删,不是藏。


















