17370845950

本文介绍一种简洁高效的方法，无需遍历子节点索引，直接通过 selection api 获取并移除光标所在子元素（如 `` 或 ``），大幅提升 dom 操作性能与代码可读性。

在处理 contenteditable 区域时，常需对用户光标聚焦的特定子元素（如加粗的“Apple”、斜体的“Orange”）执行动态操作。传统思路是先遍历父容器的 childNodes 查找匹配的索引，再调用 removeChild() —— 这不仅逻辑冗余，且在子节点数量庞大时存在不必要的性能开销。

现代浏览器已广泛支持更直观的方案：利用 window.getSelection() 获取当前选区，通过 selection.anchorNode 定位文本节点，再向上追溯至其直接父元素（即目标子元素），最后直接调用原生 Element.remove() 方法。

该方法优势显著：

• ✅ 零遍历：跳过线性搜索，时间复杂度从 O(n) 降至 O(1)；
• ✅ 语义清晰：element.remove() 是标准 DOM 方法，无需手动管理父节点引用；
• ✅ 健壮性强：配合可选链操作符（?.）安全处理边界情况（如光标位于空白处或无有效父元素时）。

以下是完整实现示例：

  AppleOrangeBanana

Delete Selected Child

function deleteChild() {
  const selection = document.getSelection();
  // anchorNode 是光标所在的 Text 节点（如 "Apple" 所在的文本节点）
  // parentElement 是包裹它的标签节点（如  元素）
  const targetElement = selection.anchorNode?.parentElement;

  // 确保目标是 editableField 的直系子元素，避免误删深层嵌套内容
  if (targetElement && targetElement.parentElement === document.getElementById('editableField')) {
    targetElement.remove();
  }
}

⚠️ 注意事项：