js中使用removeChild()方法删除dom节点

removeChild()需通过父节点删除子节点，语法为parent.removeChild(child)，返回被删节点；使用前须确认节点存在且有父节点，否则报错；现代浏览器可用更简便的remove()方法直接删除元素，但兼容性较差；常用于删除列表项、关闭弹窗等动态操作。

在JavaScript中，removeChild() 方法用于从父元素中删除指定的子节点。这个方法不会删除元素本身，而是需要通过其父节点来执行删除操作。

基本语法

parent.removeChild(child)

parent 是要删除元素的父节点，child 是要被删除的子节点。该方法会返回被删除的节点，以便后续可以复用或操作。

使用步骤和注意事项

要成功使用 removeChild()，必须确保：

• 目标节点确实存在，并且有父节点
• 必须获取到父节点，然后调用 removeChild() 删除子节点
• 如果节点已被删除或不存在，调用该方法会抛出错误

常见写法示例：

const element = document.getElementById('myDiv');
if (element && element.parentNode) {
  element.parentNode.removeChild(element);
}

更简单的替代方法（现代浏览器）

现在大多数现代浏览器支持更简洁的 remove() 方法：

document.getElementById('myDiv').remove();

这个方法直接作用于目标元素，无需访问父节点，使用更方便。但在老版本IE中不支持，需要注意兼容性。

实际应用场景

常用于动态界面管理，比如：

• 删除列表中的某一项
• 关闭提示框或弹窗
• 清理不再需要的表单元素

基本上就这些。使用 removeChild() 要注意先判断节点是否存在，避免报错。如果不需要兼容老旧浏览器，直接用 remove() 更省事。