本文介绍一种简洁高效的方法，利用 selection.anchornode.parentelement.remove() 直接删除用户光标所在位置的子元素（如 <b> 或 <i> 标签），无需遍历查找索引，显著提升性能与代码可读性。
在构建富文本编辑器或可编辑内容区域时，常需支持“点击删除当前高亮块”的交互逻辑。传统思路是先定位光标所在子节点的索引（如循环比对 childNodes），再调用 removeChild() —— 这不仅冗余，且在 DOM 节点较多时存在不必要的性能开销。
现代 DOM API 提供了更优雅的解法：直接操作选中节点的父元素。关键在于理解 document.getSelection() 返回对象的 anchorNode 属性——它指向光标起始位置所在的文本节点（Text Node）；而该文本节点的 parentElement 即为包裹它的 HTML 元素（如 <b>、<i> 等），恰好是我们要删除的目标。
以下是推荐实现：
<div contentEditable="true" id="editableField"> <b>Apple</b><i>Orange</i><b>Banana</b> </div> <button onclick="deleteChild()">Delete</button>
function deleteChild() {
const selection = document.getSelection();
// 安全移除：确保 anchorNode 存在且有可移除的父元素（非 document 或 body）
selection.anchorNode?.parentElement?.remove();
}✅ 优势说明：
- 零遍历：无需 for 循环查找索引，时间复杂度从 O(n) 降至 O(1)；
- 语义清晰：remove() 是标准 DOM 方法，语义明确，兼容性良好（Chrome 27+、Firefox 25+、Edge 12+、Safari 9+）；
- 健壮性强：使用可选链操作符（?.）避免空引用错误，适用于光标落在空白处、文本末尾等边界场景。
⚠️ 注意事项：
- 若光标位于纯文本节点（如 <div>Apple</div> 中的 "Apple" 文本），anchorNode.parentElement 即为 <div>，整体会被删除——这符合预期；
- 若需仅删除文本内容而非整个标签，请改用 selection.deleteFromDocument() 或操作 textContent；
- 确保 contentEditable="true" 的父容器结构稳定，避免 remove() 后触发意外重排或事件丢失。
总结：善用 selection.anchorNode.parentElement.remove()，是实现“所见即所删”交互最轻量、最符合直觉的方案。
