在jQuery中,對於刪除節點,我們有3種方法:
在jQuery中,我們可以使用remove()方法將某個節點刪除。
語法:
$(A).remove()
舉例1:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("ul li:eq(3)").remove(); }) }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>canvas</li> </ul> <input id="btn" type="button" value="remove刪除" /> </body> </html>
在浏覽器預覽效果如下:
當我們點擊“刪除”按鈕之後,預覽效果如下:
分析:
$("ul li:eq(3)").remove()表示選擇ul元素下的第4個li元素。對於eq()選擇器,下標是從0開始的。eq()選擇器非常實用,如果忘記的同學記得回去翻一下“jQuery簡單偽類選擇器”這一節。
舉例2:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { //remove()可以將所選元素刪除,並且返回所選元素 var $li = $("ul li:eq(3)").remove(); $($li).appendTo("ul"); }) }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>canvas</li> </ul> <input id="btn" type="button" value="remove刪除" /> </body> </html>
在浏覽器預覽效果如下:
當我們點擊“刪除”按鈕之後,預覽效果如下:
分析:
關於remove()方法,還有一點需要注意,就是這個方法可以返回一個值,返回值類型為刪除的jQuery節點對象。也就是說,雖然這個節點被刪除了,但是還可以通過返回值來再次使用這個對象。
這裡我們將刪除後的元素賦值給變量$li,然後再使用appendTo()方法添加到ul元素內部末尾。
其實根據remove()方法這個特點,我們可以輕松實現互換某兩個元素!請看下面一個簡單例子。
舉例3:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul li:nth-child(2),ul li:nth-child(4) { background-color:Orange; } </style> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { //將內容為“CSS”這一個li刪除並賦值給$li1 var $li1 = $("ul li:eq(1)").remove(); $($li1).insertAfter("ul li:eq(1)"); //將內容為“jQuery”這一個li刪除並賦值給$li2 var $li2 = $("ul li:eq(3)").remove(); $($li2).insertBefore("ul li:eq(1)"); }) }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>canvas</li> </ul> <input id="btn" type="button" value="remove刪除" /> </body> </html>
在浏覽器預覽效果如下:
當我們點擊“刪除”按鈕之後,預覽效果如下:
分析:
這個例子實現了內容為“CSS”和“jQuery”這兩個li元素的互換。技巧是借助“JavaScript”這一個li元素為參照物,然後使用我們上一節的“jQuery插入節點”的方法來實現。
雖然這段代碼看著很簡單,但是實際上需要注意的地方並不少,我們一步步來給大家分析。
當我們執行li1 = $("ul li:eq(1)").remove()這句代碼之後,得到的HTML結構如下:
<ul> <li>HTML</li> <li>JavaScript</li> <li>jQuery</li> <li>canvas</li> </ul>
這個時候HTML結構已經變化,也就是說有些人試圖使用$("ul li:eq(2)")來選擇“JavaScript”這一列表項這是不可取的(這是參考上一個HTML結構),正確的實現方式是$("ul li:eq(1)")。
當我們執行$($li1).insertAfter("ul li:eq(1)")這句代碼之後,得到的HTML結構如下:
<ul> <li>HTML</li> <li>JavaScript</li> <li>CSS</li> <li>jQuery</li> <li>canvas</li> </ul>
當我們執var $li2 = $("ul li:eq(3)").remove()這句代碼之後,得到的HTML結構如下:
<ul> <li>HTML</li> <li>JavaScript</li> <li>CSS</li> <li>canvas</li> </ul>
當我們執行$($li2).insertBefore("ul li:eq(1)")這句代碼之後,得到的HTML結構如下:
<ul> <li>HTML</li> <li>jQuery</li> <li>JavaScript</li> <li>CSS</li> <li>canvas</li> </ul>
在jQuery中,除了remove()方法之外,我們還可以使用detach()方法來將某個元素刪除。
語法:
$(A).detach()
說明:
detach()方法和remove()方法作用相似,但是兩者卻有著本質上的區別。
remove()方法是“徹底”地刪除元素。也就是說使用remove()方法,不僅元素會被刪除,所綁定的事件都會被刪除。
detach()方法是“半徹底”地刪除元素,也就是說使用detach()方法,只有元素被刪除,所綁定的事件並不會刪除。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { //為每一個li元素綁定一個click事件,點擊li元素會彈出相應的文本內容 $("li").click(function () { var txt = $(this).text(); alert(txt); }); $("#btn").click(function () { //刪除“jQuery”這一個li元素 var $li = $("ul li:eq(3)").remove(); //將刪除的li元素在添加到ul元素內部的末尾 $($li).appendTo("ul"); }) }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>canvas</li> </ul> <input id="btn" type="button" value="remove刪除" /> </body> </html>
在浏覽器預覽效果如下:
分析:
在這裡,我們為每一個li元素添加一個click(單擊)事件,點擊任何一個li元素,都會彈出該li元素的文本內容。當我們點擊“刪除”按鈕之後,“jQuery”這一項被添加到ul元素內部末尾。但是這個時候如果我們點擊“jQuery”這一項時候,會發現之前所綁定的click事件消失了。
我們在“在線測試”中將remove()方法替換成detach()方法後,卻可以發現li元素雖然被刪除,但是如果重新添加使用,該元素所綁定的事件仍然存在。
終上所述,我們可以總結:當我們刪除節點後,如果希望重新使用該節點,並且希望被刪除的節點在重新使用後還能保留原來綁定的事件,那我們應該使用detach()而不是remove()。
remove()和detach()都是將某個元素刪除。如果我們想要“清空”某個節點,則可以用到empty()方法。
在jQuery中,我們可以使用empty()方法清空元素內部的所有節點。
語法:
$(A).empty()
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("ul li:eq(3)").empty(); }) }) </script> </head> <body> <ul> <li><strong>HTML</strong></li> <li><strong>CSS</strong></li> <li><strong>JavaScript</strong></li> <li><strong>jQuery</strong></li> <li><strong>canvas</strong></li> </ul> <input id="btn" type="button" value="empty清空" /> </body> </html>
在浏覽器預覽效果如下:
當我們點擊“清空”按鈕之後,預覽效果如下:
分析:
remove()和detach()這2個方法刪除節點時,會將自身節點以及後代節點一並刪除。但是empty()方法僅僅刪除後代節點,而會保留自身節點。
在jQuery中,remove()、detach()和empty()這3種方法其實還可以接受一個參數,例如remove()方法語法如下(detach()和empty()也類似):
$(A).empty()
說明:
參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。
其中expression可以省略,$(A).remove(expression)表示刪除符合expression條件的A元素。當expression省略時,即$(A).remove()時,表示刪除所有的A元素。
$("#div3").remove(); $("div").remove("#div3");
上面這兩句代碼其實是等價的,一般情況下,我們建議使用無參數的remove()方法,直接把篩選條件放在$()選擇器裡面,沒必要多此一舉把篩選條件放在方法後面。