JavaScript 删除节点

■知识点

removeChild()方法可以从子节点列表中删除某个节点。其用法如下：

    nodeObject.removeChild(node)

其中，参数node为要删除节点。如果删除成功，则返回被删除节点；如果失败，则返回null。

当使用removeChildO方法删除节点时，该节点所包含的所有子节点将同时被删除。

■实例设计

【示例1】在下面的示例中单击按钮时将删除红盒子中的一级标题。

<div id="red">

    <hl>红盒子</hl>

</div>

<div id="blue">蓝盒子</div> 

<button id="ok">移动</button>

<script>

var ok = document.getElementByld("ok");                   //获取按钮元素的引用

ok.onclick = function (){                                                   //为按钮注册一个鼠标单击事件处理函数

    var red = document.getElementByld ("red");           //获取红盒子的引用

    var hi = document.getElementsByTagName("hi")[0];   //获取标题元素的引用 

    red. removeChild (hi) ;                                            //移出红盒子包含的标题元素

}

</script>

【示例2】如果想删除蓝盒子，但是又无法确定它的父元素，此时可以使用parentNode属性来快速获取父元素的引用，并借助这个引用来实现删除操作。

var ok = document. getElementByld ("ok") ;           //获取按钮兀素的引用

ok.onclick = function () {                                           //为按钮注册一个鼠标单击事件处理函数

    var blue = document.getElementByld("blue");     //获取蓝盒子的引用

        var parent = blue .parentNode;                   //获取蓝盒子父元素的引用

    parent. removeChild (blue);                           //移出蓝盒子

}

如果希望把删除节点插入到文档其他位置，可以使用removeChild()方法，也可以使用appendChild() 和insertBefore()方法实现。