DOM節點刪除之empty()的基本用法
要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這里我們開仔細了解下empty方法
empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了 指定元素中的所有子節點。
這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因為，根據說明，元素里任何文本字符串都被看做是該元素的子節點。請看下面的HTML：
<div class="hello"><p>慕課網</p></div>
如果我們通過empty方法移除里面div的所有元素，它只是清空內部的html代碼，但是標記仍然留在DOM中
//通過empty處理
$('.hello').empty()
//結果：<p>慕課網</p>被移除
<div class="hello"></div>
可以參考右邊的代碼區域：
通過empty移除了當前div元素下的所有p元素 但是本身id=test的div元素沒有被刪除
<script type="text/javascript">
$("button").on('click', function() {
//通過empty移除了當前div元素下的所有p元素
//但是本身id=test的div元素沒有被刪除
$("#test").empty()
})
</script>
DOM節點刪除之remove()的有參用法和無參用法
remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
例如一段節點，綁定點擊事件
<div class="hello"><p>慕課網</p></div>
$('.hello').on("click",fn)
如果不通過remove方法刪除這個節點其實也很簡單，但是同時需要把事件給銷毀掉，這里是為了防止"內存泄漏"，所以前端開發者一定要注意，綁了多少事件，不用的時候一定要記得銷毀
通過remove方法移除div及其內部所有元素，remove內部會自動操作事件銷毀方法，所以使用使用起來非常簡單
//通過remove處理
$('.hello').remove()
//結果：<div class="hello"><p>慕課網</p></div> 全部被移除
//節點不存在了,同事事件也會被銷毀
remove表達式參數：
remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點
我們可以通過$()選擇一組相同的元素，然后通過remove（）傳遞篩選的規則，從而這樣處理
對比右邊的代碼區域，我們可以通過類似於這樣處理
$("p").filter(":contains('3')").remove()
<script type="text/javascript">
$("button:first").on('click', function() {
//刪除整個 class="test1"的div節點
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//這個也是一個過濾器的處理
$("p").remove(":contains('3')")
})
</script>
DOM節點刪除之empty和remove區別
要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法，兩個都是刪除元素，但是兩者還是有區別
empty方法
- 嚴格地講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后代節點
- empty不能刪除自己本身這個節點
remove方法
- 該節點與該節點所包含的所有后代節點將同時被刪除
- 提供傳遞一個篩選的表達式，刪除指定合集中的元素
<script type="text/javascript">
$("#bt1").on('click', function() {
//刪除了2個p元素，但是本着沒有刪除
$("#test1").empty()
})
$("#bt2").on('click', function() {
//刪除整個節點
$("#test2").remove()
})
</script>
DOM節點刪除之保留數據的刪除操作detach()
如果我們希望臨時刪除頁面上的節點，但是又不希望節點上的數據與事件丟失，並且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach方法來處理
detach從字面上就很容易理解。讓一個web元素托管。即從當前頁面中移除該元素，但保留這個元素的內存模型對象。
來看看jquery官方文檔的解釋：
這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。
$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。
當然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數據
參考右邊的代碼區域，通過 $("p").detach()把所有的P元素刪除后，再通過append把刪除的p元素放到頁面上，通過點擊文字，可以證明事件沒有丟失
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通過detach方法刪除元素
//只是頁面不可見，但是這個節點還是保存在內存中
//數據與事件都不會丟失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到頁面中
//事件還是存在
$("body").append(p);
});
</script>
DOM節點刪除之detach()和remove()區別
JQuery是一個很大強的工具庫，在工作開發中，有些方法因為不常用到，或是沒有注意到而被我們忽略。
remove()和detach()可能就是其中的一個，可能remove()我們用得比較多，而detach()就可能會很少了
通過一張對比表來解釋2個方法之間的不同
| 方法名 |
參數 |
事件及數據是否也被移除 |
元素自身是否被移除 |
| remove |
支持選擇器表達 |
是 |
是（無參數時），有參數時要根據參數所涉及的范圍 |
| detach |
參數同remove |
否 |
情況同remove |
remove：移除節點
- 無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與數據
- 有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與數據
detach：移除節點
- 移除的處理與remove一致
- 與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來
- 例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。
<script type="text/javascript">
//給頁面上2個p元素都綁定時間
$('p').click(function(e) {
alert(e.target.innerHTML)
})
$("button:first").click(function() {
var p = $("p:first").remove();
p.css('color','red').text('p1通過remove處理后,點擊該元素,事件丟失')
$("body").append(p);
});
$("button:last").click(function() {
var p = $("p:first").detach();
p.css('color','blue').text('p2通過detach處理后,點擊該元素事件存在')
$("body").append(p);
});
</script>