本文介绍一种无需遍历节点索引、直接通过 selection api 定位并移除光标所在子元素的高效方法，适用于 contenteditable 区域中对 ``、`` 等内联标签的即时删除操作。
在可编辑（contentEditable="true"）的
中，用户常需快速删除光标所在的某个富文本子元素（如 Apple）。传统思路是先遍历 childNodes 查找索引，再调用 removeChild() —— 这不仅低效（尤其在大量子节点时），还易因文本节点、空白符等干扰导致逻辑出错。
现代 DOM API 提供了更简洁、语义更清晰的解决方案：直接调用 Element.remove() 方法。该方法无需父节点引用或索引计算，只需准确获取被选中的子元素即可。
关键在于正确提取目标元素：
- document.getSelection() 获取当前选区；
- selection.anchorNode 是光标锚点所在的节点（可能是文本节点）；
- anchorNode.parentElement 即其直接父元素（如 或 ）；
- 使用可选链 ?. 安全调用 remove()，避免 null 或 undefined 报错。
✅ 正确实现如下：
AppleOrangeBanana
function deleteChild() {
const selection = document.getSelection();
// 安全移除光标所在子元素（如或）
selection.anchorNode?.parentElement?.remove();
}⚠️ 注意事项：
- 此方案假设用户点击时光标位于某个子元素内部（例如在“Apple”文字上单击），此时 anchorNode.parentElement 指向 等容器；
- 若光标落在两个子元素之间（如 Apple|Orange 的间隙），anchorNode 可能是 #text 节点且 parentElement 为 本身 —— 此时会误删整个容器。如需更鲁棒行为，可增加判断：仅当 parentElement !== myDiv 时执行 remove()；
- Element.remove() 兼容所有现代浏览器（Chrome 27+, Firefox 25+, Edge 12+, Safari 7.1+），无需 polyfill；
- 不要混淆 remove() 与 removeChild()：前者是元素自身方法，后者需由父节点调用，语义和使用成本均更高。
总结：利用 selection.anchorNode.parentElement.remove() 替代“查索引 + removeChild”，代码更简短、性能更优、可维护性更强，是处理 contentEditable 子元素删除任务的推荐实践。
