JavaScript 中跨浏览器安全删除 DOM 节点的方法

JavaScript 中跨浏览器安全删除 DOM 节点的方法

在 JavaScript 操作 DOM 树时，经常需要处理节点的增删，例如在输入框后设置增加和删除按钮，点击相应按钮即可动态添加或移除输入框。虽然 Prototype 等 JS 框架提供了 element.remove() 方法，但核心 JavaScript 标准中并未包含此功能。IE 浏览器曾提供 removeNode() 方法，尝试运行相关代码可见其效果。

<div><input onclick="removeNode(this)" type="text" value="点击移除该输入框" /></div>

上述方法在 IE 中有效，但在 Firefox 等遵循标准的浏览器中会报错 'removeNode is not defined'。核心 JavaScript 提供了 removeChild() 方法用于移除子节点。我们可以通过获取目标节点的父节点，并在父节点上调用 removeChild() 来实现指定节点的删除。为此，我们可以封装一个名为 removeElement 的方法。

function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element); 
 }
}

运行以下代码，该方法可在各种浏览器中正确执行。

<script type="text/javascript">
function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element);
 }
}
</script>
<div><input onclick="removeElement(this)" type="text" value="点击移除该输入框" /></div>

以上内容为本文的全部介绍，如需了解更多 JavaScript 语法，建议参考《JavaScript 参考教程》及《JavaScript 代码风格指南》，也欢迎大家继续支持本站。