DIV CSS 佈局教程網

13.7 刪除節點
編輯:JavaScript基礎知識     

一、JavaScript刪除節點

在JavaScript中,我們可以使用removeChild()方法來刪除當前節點下的某個子節點。

語法:

 
obj.removeChild(oldChild);

說明:

參數obj表示當前節點,而參數oldChild表示需要當前節點內部的某個子節點。

舉例1:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //定義刪除函數
        function del() {
            var e = document.getElementById("list");
            //判斷元素節點e是否有子節點
            if (e.hasChildNodes) {
                e.removeChild(e.lastChild);    //刪除e元素的最後一個子節點
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="刪除" onclick="del()"/></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡“if(e.hasChildNodes)”判斷元素節點e是否有子節點。而“e.lastChild”表示獲取元素節點額的最後一個子節點。

假如我們想要把整個列表刪除,該如何實現呢?

舉例2:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function del() {
            var e = document.getElementById("list");
            document.body.removeChild(e);
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="刪除" onclick="del()" />
</body>
</html>

在浏覽器預覽效果如下:

分析:

當我們點擊“刪除”按鈕時,整個列表都被刪除了。我之所以舉這兩個例子是讓大家明白一個知識點,在使用removeChild()方法刪除元素之前我們必須找到2點:

  • (1)被刪除的子節點;
  • (2)被刪除子節點的父節點;

在這個例子中,ul元素的父節點就是body了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved