JavaScript 刪除節(jié)點

■知識點

removeChild()方法可以從子節(jié)點列表中刪除某個節(jié)點。其用法如下：

    nodeObject.removeChild(node)

其中，參數(shù)node為要刪除節(jié)點。如果刪除成功，則返回被刪除節(jié)點；如果失敗，則返回null。

當(dāng)使用removeChildO方法刪除節(jié)點時，該節(jié)點所包含的所有子節(jié)點將同時被刪除。

■實例設(shè)計

【示例1】在下面的示例中單擊按鈕時將刪除紅盒子中的一級標(biāo)題。

<div id="red">

    <hl>紅盒子</hl>

</div>

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

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

<script>

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

ok.onclick = function (){                                                   //為按鈕注冊一個鼠標(biāo)單擊事件處理函數(shù)

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

    var hi = document.getElementsByTagName("hi")[0];   //獲取標(biāo)題元素的引用 

    red. removeChild (hi) ;                                            //移出紅盒子包含的標(biāo)題元素

}

</script>

【示例2】如果想刪除藍盒子，但是又無法確定它的父元素，此時可以使用parentNode屬性來快速獲取父元素的引用，并借助這個引用來實現(xiàn)刪除操作。

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

ok.onclick = function () {                                           //為按鈕注冊一個鼠標(biāo)單擊事件處理函數(shù)

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

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

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

}

如果希望把刪除節(jié)點插入到文檔其他位置，可以使用removeChild()方法，也可以使用appendChild() 和insertBefore()方法實現(xiàn)。