应使用事件委托监听 ol，为每个 li 动态添加右对齐的绝对定位删除按钮；按钮需设 type="button" 且不干扰列表计数流，删除后序号自动更新。
用 JavaScript 动态绑定删除按钮到 ol 的每个 li
直接在 HTML 里写死按钮不可扩展，也难维护。正确做法是用 JS 遍历 ol 的子元素，在每个 li 末尾插入一个带事件的 button。
注意：不能用 document.querySelectorAll('li') 模糊匹配所有 li，否则会误删其他列表（比如嵌套的 ul 里的项）。要限定作用域：
- 用
document.querySelector('ol').children或ol.querySelectorAll('li')精准获取目标列表项 - 按钮需添加
type="button"，避免表单提交干扰 - 推荐用事件委托（监听
ol），而不是给每个按钮单独绑click，尤其当列表项可能动态增删时
const ol = document.querySelector('ol');
ol.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-btn')) {
e.target.closest('li').remove();
}
});
// 插入按钮（可选：只在首次加载时运行）
ol.querySelectorAll('li').forEach(li => {
if (!li.querySelector('.delete-btn')) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'delete-btn';
btn.textContent = '×';
li.append(btn);
}
});
CSS 控制删除按钮样式和位置
按钮默认会破坏列表项的垂直对齐和缩进。关键点是让按钮「不参与列表计数流」，且右对齐不挤占内容空间：
- 给
li设position: relative，按钮设position: absolute; right: 0; top: 50%; transform: translateY(-50%) - 避免用
float: right—— 它会让按钮脱离文档流但可能影响ol的counter-reset行为 - 如果用了
list-style-position: inside，按钮会和数字重叠，此时必须改用outside（默认值）
删除后序号自动更新，但要注意 DOM 操作时机
ol 的序号由浏览器自动维护，调用 li.remove() 后会立刻重排。但如果你在删除前读取了 li.innerText 或依赖其索引（如 Array.from(ol.children).indexOf(li)），要注意：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 删除操作是同步的，
remove()执行完，ol.children.length就已变化 - 不要在循环中用
for (let i = 0; i 删除多个项——长度实时变，会导致跳过下一项；应反向遍历或用 <code>while (ol.firstChild) - 若需记录被删项原始序号，应在
remove()前通过Array.from(ol.children).indexOf(li) + 1获取
兼容性与无障碍（a11y）要点
纯 × 按钮对屏幕阅读器不友好。至少加 aria-label，并确保焦点可访问：
- 按钮必须能用 Tab 键聚焦，不能加
tabindex="-1"（除非你另有键盘导航逻辑） - 用
aria-label="删除此项"，别用title属性替代——部分读屏软件忽略title - IE11 不支持
closest()，如需兼容，得 fallback 到循环父节点判断nodeName === 'LI' - 移动端点击区域太小？给按钮加
min-width: 24px; min-height: 24px; padding: 4px
真正麻烦的是混合编辑场景：比如用户双击某项进入编辑模式，同时还要保留删除能力。这时候按钮显隐逻辑、焦点管理、Esc 键取消编辑等细节，比加个按钮本身复杂得多。
