前言
相信大家都知道，要移除頁面上節(jié)點(diǎn)是開發(fā)者常見的操作，jQuery提供了幾種不同的方法用來處理這個(gè)問題。下面本文就進(jìn)行一個(gè)詳細(xì)的介紹，感興趣的朋友們一起來看看吧。
一、empty
empty 顧名思義，清空方法，但是與刪除又有點(diǎn)不一樣，因?yàn)樗灰瞥?指定元素中的所有子節(jié)點(diǎn)。
這個(gè)方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因?yàn)椋鶕?jù)說明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)。如果我們通過empty方法移除里面div的所有元素，它只是清空內(nèi)部的html代碼，但是標(biāo)記仍然留在DOM中，通過empty移除了當(dāng)前div元素下的所有p元素 但是本身id=test的div元素沒有被刪除。
$("button").on('click', function() { //通過empty移除了當(dāng)前div元素下的所有p元素 //但是本身id=test的div元素沒有被刪除 $("#test").empty() })二、remove
remove與empty一樣，都是移除元素的方法，但是remove會(huì)將元素自身移除，同時(shí)也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。
例如一段節(jié)點(diǎn)，綁定點(diǎn)擊事件，如果不通過remove方法刪除這個(gè)節(jié)點(diǎn)其實(shí)也很簡單，但是同時(shí)需要把事件給銷毀掉，這里是為了防止"內(nèi)存泄漏"，所以前端開發(fā)者一定要注意，綁了多少事件，不用的時(shí)候一定要記得銷毀。通過remove方法移除div及其內(nèi)部所有元素，remove內(nèi)部會(huì)自動(dòng)操作事件銷毀方法，所以使用使用起來非常簡單
remove表達(dá)式參數(shù)：
remove比empty好用的地方就是可以傳遞一個(gè)選擇器表達(dá)式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)，我們可以通過$()選擇一組相同的元素，然后通過remove（）傳遞篩選的規(guī)則，如：$("p").filter(":contains('3')").remove()。
<body> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> <h2>通過jQuery remove方法移除元素</h2> <div class="test1"> <p>p元素1</p> <p>p元素2</p> </div> <div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> <button>點(diǎn)擊通過jQuery的empty移除元素</button> <button>點(diǎn)擊通過jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //刪除整個(gè) class=test1的div節(jié)點(diǎn) $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //這個(gè)也是一個(gè)過濾器的處理 $("p").remove(":contains('3')") }) </script></body>empty和remove區(qū)別
用到移除指定元素的時(shí)候，jQuery提供了empty()與remove([expr])二個(gè)方法，兩個(gè)都是刪除元素，但是兩者還是有區(qū)別
empty方法
empty()方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)，它能清空元素中的所有后代節(jié)點(diǎn)remove方法
三、detach
如果我們希望臨時(shí)刪除頁面上的節(jié)點(diǎn)，但是又不希望節(jié)點(diǎn)上的數(shù)據(jù)與事件丟失，并且能在下一個(gè)時(shí)間段讓這個(gè)刪除的節(jié)點(diǎn)顯示到頁面，這時(shí)候就可以使用detach方法來處理detach從字面上就很容易理解。讓一個(gè)web元素托管。即從當(dāng)前頁面中移除該元素，但保留這個(gè)元素的內(nèi)存模型對(duì)象。
官方解釋：這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來。 $("div").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當(dāng)你append之后，又重新回到了文檔流中。就又顯示出來了。
當(dāng)然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)
通過 $("p").detach()把所有的P元素元素刪除后，在通過append把刪除的p放到頁面上，可以通過點(diǎn)擊文字測試，事件沒有丟失
<body> <p>P元素1，默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p> <p>P元素2，默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p> <button id="bt1">點(diǎn)擊刪除 p 元素</button> <button id="bt2">點(diǎn)擊移動(dòng) p 元素</button> <script type="text/javascript"> $('p').click(function(e) { alert(e.target.innerHTML) }) var p; $("#bt1").click(function() { if (!$("p").length) return; //去重 //通過detach方法刪除元素 //只是頁面不可見，但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中 //數(shù)據(jù)與事件都不會(huì)丟失 p = $("p").detach() }); $("#bt2").click(function() { //把p元素在添加到頁面中 //事件還是存在 $("body").append(p); }); </script></body>detach()和remove()區(qū)別
JQuery是一個(gè)很大強(qiáng)的工具庫，在工作中開發(fā)中，可是有些方法還是因?yàn)椴怀Ｓ玫剑蚴菦]有注意到而被我們而忽略。remove()和detach()可能就是其中的一個(gè)，可能remove()我們用得比較多，而detach()就可能會(huì)很少了
通過一張對(duì)比表來解釋2個(gè)方法之間的不同
| 方法名 | 參數(shù) | 事件及數(shù)據(jù)是否也被移除 | 元素自身是否被移除 |
| remove | 支持選擇器表達(dá) | 是 | 是（無參數(shù)時(shí)），有參數(shù)時(shí)要根據(jù)參數(shù)所涉及的范圍 |
| detach | 參數(shù)同remove | 否 | 情況同remove |
remove：移除節(jié)點(diǎn)
detach：移除節(jié)點(diǎn)
remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來$("p").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當(dāng)你append之后，又重新回到了文檔流中。就又顯示出來了。總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
