在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點:
在這個例子中,ul元素的父節點就是body了。