如何在可编辑区域中直接删除选中的子元素

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

在处理 contenteditable 区域时，常见需求是让用户点击“删除”按钮后，移除当前光标所在的包裹文本的子元素（例如 Apple）。传统思路是先遍历父容器的 childNodes 查找匹配的父元素索引，再调用 removeChild() —— 这不仅冗余，还易因文本节点、空白符等干扰导致逻辑出错。

现代浏览器（Chrome 27+、Firefox 25+、Edge 12+、Safari 10+）已原生支持 Element.remove() 方法，它可直接从 DOM 中移除调用该方法的元素，无需依赖父节点引用或索引计算。

因此，只需两步即可实现精准删除：

1. 获取当前选区：document.getSelection()
2. 安全访问选中位置的最近语义化父元素（即 、 等），并调用 .remove()

以下是优化后的完整实现：

  AppleOrangeBanana

Delete Selected Element

function deleteChild() {
  const selection = document.getSelection();
  // anchorNode 是光标所在节点（可能是文本节点）
  // parentElement 是其最近的 HTML 元素（如 、），且必须是 #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.');
  }
}

✅ 关键优势：