本文介绍一种简洁高效的方法，无需遍历节点索引，直接通过 selection api 获取并移除用户光标所在位置的子元素（如 `` 或 `` 标签），大幅提升 dom 操作性能与代码可读性。
在处理 contenteditable 区域时，常见需求是让用户点击“删除”按钮后，移除当前光标所在的包裹文本的子元素（例如 <b>Apple</b>）。传统思路是先遍历父容器的 childNodes 查找匹配的父元素索引，再调用 removeChild() —— 这不仅冗余，还易因文本节点、空白符等干扰导致逻辑出错。
现代浏览器（Chrome 27+、Firefox 25+、Edge 12+、Safari 10+）已原生支持 Element.remove() 方法，它可直接从 DOM 中移除调用该方法的元素，无需依赖父节点引用或索引计算。
因此，只需两步即可实现精准删除：
- 获取当前选区：document.getSelection()
- 安全访问选中位置的最近语义化父元素（即 <b>、<i> 等），并调用 .remove()
以下是优化后的完整实现：
<div contentEditable="true" id="editableField"> <b>Apple</b><i>Orange</i><b>Banana</b> </div> <button onclick="deleteChild()">Delete Selected Element</button>
function deleteChild() {
const selection = document.getSelection();
// anchorNode 是光标所在节点（可能是文本节点）
// parentElement 是其最近的 HTML 元素（如 <b>、<i>），且必须是 #editableField 的直系子元素
const targetEl = selection.anchorNode?.parentElement;
if (targetEl && targetEl.parentElement === document.getElementById('editableField')) {
targetEl.remove(); // ✅ 直接移除，无需索引、无需 parentNode.removeChild()
} else {
console.warn('No valid child element selected within editable field.');
}
}✅ 关键优势：
- 零循环、零索引计算，时间复杂度 O(1)；
- 利用可选链操作符 (?.) 和严格校验（targetEl.parentElement === ...）避免误删外层嵌套元素；
- 兼容所有现代浏览器，无需 polyfill（若需支持 IE，可补充 targetEl.parentNode.removeChild(targetEl) 回退逻辑）。
⚠️ 注意事项：
- 若光标落在纯文本区域（如两个 <b> 之间无标签的空格），anchorNode.parentElement 可能为 null 或指向 <div> 本身，此时应跳过操作；
- contenteditable 内部结构复杂时（如含 <span> 嵌套、<br>、<p> 等），建议结合 selection.getRangeAt(0).commonAncestorContainer 进行更精细定位；
- 生产环境推荐使用事件委托 + addEventListener 替代内联 onclick，提升可维护性与安全性。
综上，element.remove() 是替代繁琐索引查找的首选方案——简洁、健壮、符合现代 Web 开发实践。
