實例詳解基于DOM之empty和remove的區別

來源：懂視網責編：小OO 時間：2020-11-27 20:08:33

實例詳解基于DOM之empty和remove的區別

要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這里我們開仔細了解下empty和remove方法。empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了指定元素中的所有子節點。這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因為，根據說明，元素里任何文本字符串都被看做是該元素的子節點。請看下面的HTML。<；p class="；hello"；>；<；p>；這是p標簽<；/p>；<；/p>；。如果我們通過empty方法移除里面p的所有元素，它只是清空內部的html代碼，但是標記仍然留在DOM中。

推薦度：

點擊下載本文 文檔為doc格式

導讀要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這里我們開仔細了解下empty和remove方法。empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了指定元素中的所有子節點。這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因為，根據說明，元素里任何文本字符串都被看做是該元素的子節點。請看下面的HTML。<；p class="；hello"；>；<；p>；這是p標簽<；/p>；<；/p>；。如果我們通過empty方法移除里面p的所有元素，它只是清空內部的html代碼，但是標記仍然留在DOM中。

本文主要為大家帶來一篇基于DOM節點刪除之empty和remove的區別(詳解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。

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

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

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

<p class="hello"><p>這是p標簽</p></p>

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

//通過empty處理
$('.hello').empty()

//結果：<p>這是p標簽</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('click', function() {
 //通過empty移除了當前p元素下的所有p元素
 //但是本身id=test的p元素沒有被刪除
 $("#test").empty()
 })
 </script>
</body>

</html>

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

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

<p class="hello"><p>這是P段落</p></p>
$('.hello').on("click",fn)

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

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

//通過remove處理
$('.hello').remove()
//結果：<p class="hello"><p>這是P段落</p></p> 全部被移除 //節點不存在了,同事事件也會被銷毀

remove表達式參數：

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

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

<!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>
 .test1 {
 background: #bbffaa;
 }
 
 .test2 {
 background: yellow;
 }
 </style>
</head>

<body>
 <h2>通過jQuery remove方法移除元素</h2>
 <p class="test1">
 <p>p元素1</p>
 <p>p元素2</p>
 </p>
 <p class="test2">
 <p>p元素3</p>
 <p>p元素4</p>
 </p>
 <button>通過點擊jQuery的empty移除元素</button>
 <button>通過點擊jQuery的empty移除指定元素</button>
 <script type="text/javascript">
 $("button:first").on('click', function() {
 //刪除整個 class=test1的p節點
 $(".test1").remove()
 })

 $("button:last").on('click', function() {
 //找到所有p元素中，包含了3的元素
 //這個也是一個過濾器的處理
 $("p").remove(":contains('3')")
 })
 </script>
</body>

</html>

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

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

empty方法

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

empty不能刪除自己本身這個節點

remove方法

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com