JQuery DOM 刪除節點

如果文檔中某一個元素多余，那么應將其刪除。JQuery提供了兩種刪除節點的方法，即remove()和empty()。

HTML DOM結構如下：

view source

print ?

1	<p class="nm_p" title="歡迎訪問簡明現代魔法圖書館" >歡迎訪問簡明現代魔法圖書館</p>

2	<ul class="nm_ul">

3	<li title='PHP魔法'>簡單易懂的PHP魔法</li>

4	<li title='C魔法'>簡單易懂的C魔法</li>

5	<li title='JavaScript魔法'>簡單易懂的JavaScript魔法</li>

6	<li title='JQuery'>簡單易懂的JQuery魔法</li>

7

</ul>

remove()方法

作用是從DOM中刪除所有匹配的元素，傳入的參數用於根據JQuery表達式來篩選元素。

例如刪除<ul>節點中的第2個<li>元素節點，JQuery代碼如下：

1	$(".nm_ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除

2

</li>

運行代碼后效果將刪掉第二個節點。

當某個節點用remove()方法刪除后，該節點所包含的所有后代節點將同時被刪除。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。下面的JQuery代碼說明元素用remove()方法刪除后，還是可以繼續使用的。

1	var $li = $("nm_ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除。

2	$li.appendTo("nm_ul");                     // 把剛才刪除的又重新添加到<ul>元素里

3	//所以，刪除只是從網頁中刪除，在jQuery對象中，這個元素還是存在的，我們可以重新獲取它

可以直接使用appendTo()方法的特性來簡化以上代碼，JQuery代碼如下：

1	$("nm_ul li:eq(1)").appendTo("nm_ul");

2	//appendTo()方法也可以用來移動元素

3	//移動元素時首先從文檔上刪除此元素，然后將該元素插入得到文檔中的指定節點

另外remove()方法也可以通過傳遞參數來選擇性地刪除元素，JQuery代碼如下：

1	// 把<li>元素中屬性title不等於"菠蘿"的<li>元素刪除

2	$("nm_ul li").remove("li[title!=JQuery]");

empty()方法

嚴格來講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后代節點。JQuery代碼如下：

1	$("nm_ul li:eq(1)").empty(); // 找到第二個<li>元素節點后，清空此元素里的內容

當運行代碼后，第2個<li>元素的內容被清空了，只剩下<li>標簽默認的符號“.”。