有序列表<ol>需用JavaScript动态增减<li>元素，浏览器自动按DOM顺序渲染序号；新增用document.createElement('li')+appendChild()，删除必须调用remove()而非隐藏，表单字段名须用skills[][]等无索引语法确保后端正确解析。
有序列表<ol>本身不支持动态增减，得靠 JavaScript 操作 DOM
浏览器原生的 <ol> 标签只是语义容器，没有内置“添加项”或“删除项”的 API。所谓“动态增减”，本质是用 JS 创建/移除 <li> 元素，并确保它们在 <ol> 内部顺序正确——浏览器会自动按 DOM 顺序渲染序号（1、2、3…），无需手动改 value 属性。
常见错误包括：
- 用
innerHTML += '<li>新项'</li>拼接：会重置已有<li>的子元素状态（比如内部的<input>值、焦点、事件监听器） - 手动设置
<li value="5">强制序号：破坏语义，且删除中间项后序号断裂，视觉与逻辑脱节 - 把
<ol>当成数组管理器，误以为修改start属性能“重排索引”：它只影响起始数字，不改变项数或顺序
document.createElement('li') + appendChild() 是最稳的新增方式
每次新增都应独立创建节点，避免副作用。关键点：
- 用
document.createElement('li')创建干净节点，再设textContent或innerHTML - 直接
olElement.appendChild(newLi)插入末尾；若需插入指定位置，用olElement.insertBefore(newLi, targetLi) - 如果
<li>内含表单控件（如<input name="items[]">），确保 name 使用无索引数组语法，避免后端解析错位 - 别给
<li>加 id 或 data-index 来“标记序号”——序号由 DOM 位置决定，不是你 JS 里记的数字
删除 <li> 必须调用 remove() 或 removeChild()，不能只隐藏
仅设 style.display = 'none' 或 hidden 属性，DOM 节点仍在，<ol> 仍会计数，提交时字段也照常发送。真正删除要：
立即学习“前端免费学习笔记（深入）”；
- 定位目标
<li>：推荐用事件委托，例如点击删除按钮时，event.target.closest('li') - 调用
liElement.remove()（现代写法）或liElement.parentNode.removeChild(liElement)（兼容老浏览器） - 如果业务层维护了
liList = []数组，删除 DOM 后必须同步liList = liList.filter(item => item !== liElement)，否则后续遍历出错 - 注意：删完后不需要重设
<ol>的start，浏览器自动重算序号
当需要“带结构的数据项”时，<li> 内嵌表单字段要遵守数组命名规则
比如动态添加多个「技能+熟练度」组合，每个 <li> 应包含一组关联字段：
<li> <input name="skills[][name]" placeholder="技能名"> <input name="skills[][level]" type="number" min="1" max="5"> <button type="button" class="delete-item">删</button> </li>
这样后端（如 Express + body-parser）收到的就是 req.body.skills = [{name: 'React', level: 4}, {...}]。关键细节：
- 用
skills[][]而非skills[0][name]：避免删除中间项导致索引断层 - 删除按钮必须绑定在
<li>内部，点击时能精准定位父级<li>并整块移除 - 不要在
<li>上写data-index然后靠它生成 name——name 应静态固定，靠浏览器聚合
真正的难点不在“怎么加”，而在“删掉一个后，剩下的还能不能被后端正确还原为连续数组”。所有动态逻辑必须和 DOM 顺序强绑定，而不是和 JS 计数器弱绑定。
