如何从div元素中删除选中的子元素？

你完全可以跳过找索引的步骤，直接利用Selection对象定位到目标子元素并删除，这比循环查找高效得多，尤其是在子元素数量多的场景下。

优化后的完整代码 #

<div contentEditable="true" id="editableField"><b>Apple</b><i>Orange</i><b>Banana</b></div>
<button onclick="deleteChild()">Delete</button>

<script>
function deleteChild() {
  const selection = document.getSelection();
  const editableField = document.getElementById("editableField");
  
  // 获取光标所在的文本节点
  const anchorNode = selection.anchorNode;
  if (!anchorNode) return;
  
  // 找到该文本节点的直接父元素（就是我们要删除的<b>/<i>）
  const targetElement = anchorNode.parentElement;
  
  // 校验：确保目标元素是editableField的直接子元素，避免误删其他内容
  if (targetElement.parentElement === editableField) {
    targetElement.remove();
  }
}
</script>

核心逻辑 #

• 直接通过selection.anchorNode获取光标所在的文本节点（比如"Apple"对应的文本节点）
• 该文本节点的parentElement就是包裹它的<b>或<i>元素，这正是我们要删除的目标子元素
• 调用元素自身的remove()方法直接删除，无需通过父元素的removeChild+索引的方式，一步到位

性能优势 #

原方法通过循环遍历子元素找索引，时间复杂度是O(n)；而优化后的方法直接定位目标元素，时间复杂度是O(1)，在子元素数量较多的大文本场景下，性能提升非常明显。

另外代码中增加了校验逻辑，防止光标在editableField的空白处时误删元素，提升了鲁棒性。

内容的提问来源于stack exchange，提问作者KeepRunning85