在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了。