ol 删除 li 后序号自动重排是默认行为，无需手动干预；应避免 innerhtml 重写，推荐事件委托删除；用 data-id 关联数据而非 dom 位置；ie11 需兼容 remove() 和 closest()。
删除 ol 里某个 li 时，序号不自动重排？
直接用 remove() 或 removeChild() 删掉 li 元素后，ol 的数字序号不会“跳过空缺”，而是照常递增——这不是 bug，是 HTML 规范行为。浏览器只按剩余子元素的 DOM 顺序重新编号，删掉中间项后，后续 li 自然接续，视觉上就是“没断”。但如果你期望点击某项就让它彻底消失且序号紧凑（比如删掉第 3 项，原第 4 项变成新第 3 项），这本身无需额外操作，ol 默认就如此。
真正出问题的场景通常是：你用 innerHTML 拼接字符串生成 ol，又用 innerHTML = ... 覆盖整个列表，导致事件监听丢失、焦点丢失或输入框内容清空；或者误以为要手动改 value 属性来“修正”序号——其实完全不需要。
-
ol的序号由浏览器自动计算，与li是否带value属性无关（除非你想强制指定起始值） - 动态删除只需操作 DOM 节点，不要碰
innerHTML重写整个列表 - 如果用
querySelectorAll('li')绑定事件，注意事件委托更稳妥（尤其列表频繁增删）
给每个 li 加删除按钮并绑定事件
最简方式是事件委托：监听 ol，判断点击目标是否为删除按钮，再删其父级 li。避免为每个 li 单独绑定，也防止新增项无事件。
<ol id="taskList"> <li>写文档 <button class="del-btn">×</button> </li> <li>测接口 <button class="del-btn">×</button> </li> </ol>
JS 部分：
document.getElementById('taskList').addEventListener('click', function(e) {
if (e.target.classList.contains('del-btn')) {
e.target.closest('li').remove(); // 安全删除，兼容嵌套结构
}
});
-
e.target.closest('li')比e.target.parentElement更健壮，不怕按钮内有span等包装 - 不要用
parentNode.removeChild()配合indexOf查位置——既慢又易错 - 若需确认删除，把
remove()换成if (confirm('确定删除？')) { ... }
用 data-id 管理业务逻辑而非依赖 DOM 顺序
序号只是展示，不是数据标识。如果删除后要同步更新后端或本地状态，别用 li 的位置索引（如第几个），而应给每项配唯一 data-id：
删除时读取这个 ID 做后续处理：
e.target.closest('li').remove();
const id = e.target.closest('li').dataset.id;
fetch(`/api/tasks/${id}`, { method: 'DELETE' });
- DOM 顺序会变，
data-id不会，适合关联真实数据 - 避免用
li的index去查数组——数组可能已不同步，或存在过滤/排序 - 如果用框架（如 Vue/React），这类逻辑通常交由响应式数据驱动，不直接操作
olDOM
IE11 下 remove() 不支持怎么办
IE11 及更早版本不支持 Element.remove()，得回退到 parentNode.removeChild()：
const li = e.target.closest('li');
if (li && li.parentNode) {
li.parentNode.removeChild(li);
}
- 不必引入完整 polyfill，几行判断足够
- 现代项目若已放弃 IE，可放心用
remove() -
closest()在 IE 也不支持，此时可用function closest(el, selector) { ... }手写简易版，或改用e.target.parentElement（假设结构固定）
ol 本身无关，但用户感知极强。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
