本文介绍一种简洁高效的方法，无需遍历子节点索引，直接通过 selection api 获取并移除光标所在子元素（如 `` 或 ``），大幅提升 dom 操作性能与代码可读性。
在处理 contenteditable 区域时，常需对用户光标聚焦的特定子元素（如加粗的“Apple”、斜体的“Orange”）执行动态操作。传统思路是先遍历父容器的 childNodes 查找匹配的索引，再调用 removeChild() —— 这不仅逻辑冗余，且在子节点数量庞大时存在不必要的性能开销。
现代浏览器已广泛支持更直观的方案：利用 window.getSelection() 获取当前选区，通过 selection.anchorNode 定位文本节点，再向上追溯至其直接父元素（即目标子元素），最后直接调用原生 Element.remove() 方法。
该方法优势显著：
- ✅ 零遍历：跳过线性搜索，时间复杂度从 O(n) 降至 O(1)；
- ✅ 语义清晰：element.remove() 是标准 DOM 方法，无需手动管理父节点引用；
- ✅ 健壮性强：配合可选链操作符（?.）安全处理边界情况（如光标位于空白处或无有效父元素时）。
以下是完整实现示例：
<div contentEditable="true" id="editableField"> <b>Apple</b><i>Orange</i><b>Banana</b> </div> <button onclick="deleteChild()">Delete Selected Child</button>
function deleteChild() {
const selection = document.getSelection();
// anchorNode 是光标所在的 Text 节点（如 "Apple" 所在的文本节点）
// parentElement 是包裹它的标签节点（如 <b> 元素）
const targetElement = selection.anchorNode?.parentElement;
// 确保目标是 editableField 的直系子元素，避免误删深层嵌套内容
if (targetElement && targetElement.parentElement === document.getElementById('editableField')) {
targetElement.remove();
}
}⚠️ 注意事项：
- selection.anchorNode 在用户未选中文本（仅放置光标）时仍有效，但若光标位于 的纯文本区域（无子标签包裹），parentElement 可能为 null 或指向自身，此时需额外校验；
- 建议添加 if (selection.rangeCount > 0) 判断，确保有有效选区；
- 若需支持旧版浏览器（如 IE），可回退至 parentNode.removeChild(child)，但现代项目推荐使用 remove()。
总结：借助 selection.anchorNode.parentElement.remove()，我们以一行核心逻辑替代了循环查找 + 索引删除的两步操作，代码更短、性能更高、可维护性更强——这是处理可编辑 DOM 子元素删除任务的最佳实践。
