JavaScript 刪除節(jié)點(diǎn)

■知識點(diǎn)

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

    nodeObject.removeChild(node)

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

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

■實(shí)例設(shè)計(jì)

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

<div id="red">

    <hl>紅盒子</hl>

</div>

<div id="blue">藍(lán)盒子</div> 

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

<script>

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

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

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

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

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

}

</script>

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

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

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

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

        var parent = blue .parentNode;                   //獲取藍(lán)盒子父元素的引用

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

}

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