JS removeChild()方法：刪除節點

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

nodeObject.removeChild(node)

其中引數 node 為要刪除節點。如果刪除成功，則返回被刪除節點；如果失敗，則返回 null。

當使用 removeChild() 方法刪除節點時，該節點所包含的所有子節點將同時被刪除。

範例1

在下面的範例中單擊按鈕時將刪除紅盒子中的一級標題。

<div id="red">
    <h1>紅盒子</h1>
</div>
<div id="blue">藍盒子</div>
<button id="ok">移動</button>
<script>
    var ok = document.getElementById ("ok");  //獲取按鈕元素的參照
    ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件處理常式
        var red = document.getElementById ("red");  //獲取紅色盒子的參照
        var h1 = document.getElementsByTagName("h1")[0];  //獲取標題元素的參照
        red.removeChild(h1);  //移出紅盒子包含的標題元素
    }
</script>

範例2

如果想刪除藍色盒子，但是又無法確定它的父元素，此時可以使用 parentNode 屬性來快速獲取父元素的參照，並借助這個參照來實現刪除操作。

var ok = document.getElementById ("ok");  //獲取按鈕元素的參照
ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件處理常式
    var blue= document.getElementById ("blue");  //獲取藍色盒子的參照
    var parent = blue.parentNode;  //獲取藍色盒子父元素的參照
    parent.removeChild(blue);  //移出藍色盒子
}

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

範例3

在 DOM 文件操作中刪除節點與建立和插入節點一樣都是使用最頻繁的，為此可以封裝刪除節點操作函數。

//封裝刪除節點函數
//引數：e表示預刪除的節點
//返回值：返回被刪除的節點，如果不存在指定的節點，則返回undefined值
function remove (e) {
    if (e) {
        var _e = e.parentNode.removeChild(e);
        return _e;
    }
    return undefined;
}

範例4

如果要刪除指定節點下的所有子節點，則封裝的方法如下：

//封裝刪除所有子節點的方法
//引數：e表示預刪除所有子節點的父節點
function empty (e) {
    while (e.firstChild) {
        e.removeChild (e.firstChild);
    }
}