首頁 >web前端 >js教程 >jquery 節點刪除的方法有哪些？

jquery 節點刪除的方法有哪些？

伊谢尔伦原創: 2017-06-17 13:33:471923瀏覽

1節點刪除之empty()的基本用法

要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這裡我們開仔細了解下empty方法

empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了指定元素中的所有子節點。

這個方法不只移除子元素（和其他後代元素），同樣移除元素裡的文字。因為，根據說明，元素裡任何文字字串都被看做是該元素的子節點。請看下面的HTML：

<p class="hello"><p>php.cn</p></p>

如果我們透過empty方法移除裡面p的所有元素，它只是清空內部的html程式碼，但是標記仍然留在DOM中

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>php.cn</p>被移除
<p class="hello"></p>

可以參考右邊的程式碼區域：

透過empty移除了目前p元素下的所有p元素但本身id=test的p元素沒有被刪除

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    p {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>
<body>
    <h2>通过empty移除元素</h2>
    <p id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on(&#39;click&#39;, function() {
        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除
        $("#test").empty()
    })
    </script>
</body>
</html>

2.節點刪除之remove()的有參用法與無參用用法

remove與empty一樣，都是移除元素的方法，但是remove會將元素本身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery資料。

例如一段節點，綁定點擊事件

<p class="hello"><p>php.cn</p></p>
$('.hello').on("click",fn)

如果不透過remove方法刪除這個節點其實也很簡單，但是同時需要把事件給銷毀掉，這裡是為了防止"記憶體洩漏"，所以前端開發者一定要注意，綁了多少事件，不用的時候一定要記得銷毀

透過remove方法移除p及其內部所有元素，remove內部會自動操作事件銷毀方法，所以使用使用起來非常簡單

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>php.cn</p></p> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表達式參數：

remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

我們可以透過$()選擇一組相同的元素，然後透過remove（）傳遞篩選的規則，從而這樣處理

比較右邊的程式碼區域，我們可以透過類似這樣處理

$("p").filter(":contains(&#39;3&#39;)").remove()

3.節點刪除之empty和remove區別

##要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法，兩個都是刪除元素，但是兩者還是有區別

empty方法

嚴格地講，empty()方法不是刪除節點，而是清空節點，它能清空元素中的所有後代節點

empty不能刪除自己這個節點

remove方法

該節點與該節點所包含的所有後代節點將同時被刪除

提供傳遞一個篩選的表達式，刪除指定合集中的元素

4.節點刪除之保留資料的刪除操作detach()

如果我們希望暫時刪除頁面上的節點，但是又不希望節點上的資料與事件遺失，並且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach方法來處理

detach從字面上就很容易理解。讓一個web元素託管。即從目前頁面中移除該元素，但保留這個元素的記憶體模型物件。

來看看jquery官方文件的解釋：

這個方法不會把符合的元素從jQuery物件中刪除，因而可以在將來再使用這些符合的元素。與remove()不同的是，所有綁定的事件、附加的資料等都會保留下來。 $("p").detach()這一句會移除對象，只是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了文件流程。就又顯示出來了。

當然這裡要特別注意，detach方法是JQuery特有的，所以它只能處理透過JQuery的方法綁定的事件或資料

透過 $("p").detach()把所有的P元素刪除後，再透過append把刪除的p元素放到頁面上，透過點選文字，可以證明事件沒有遺失

5.節點刪除之detach()和remove()區別

JQuery是一個很大的工具庫，在工作開發中，有些方法因為不常用到，或是沒有註意到而被我們忽略。

remove()和detach()可能就是其中的一個，可能remove()我們用得比較多，而detach()就可能會很少了

remove：移除節點

無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與資料

有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與資料

detach：移除節點

移除的處理與remove一致

#與remove()不同的是，所有綁定的事件、附加的資料等都會保留下來

例如：$("p").detach()這一句會移除對象，只是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了文件流程。就又顯示出來了。

以上是jquery 節點刪除的方法有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery如何取得和計算物件的長度？下一篇：jQuery如何取得和計算物件的長度？

看更多