1.remove()
remove()方法移除被選元素，包括所有的文本和子節點。
語法：$(selector).remove()
當我們想將元素自身移除時我們用 .remove()，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
該方法不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用這些匹配的元素。
但除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 數據。其他的比如綁定的事件、附加的數據等都會被移除。
例子1：（移除數據）
<div class="header"></div>
<div id="middle">你好</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
//刪除整個 id=middle的節點
$("#middle").remove();
})
</script>
初始
點擊刪除按鈕之后
可以看到使用remove方法刪除之后，整個 id=middle的節點包括里面的數據都沒有了
例子2（子節點的數據也會被移除）
<div class="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
//刪除所有元素為div的節點
$("div").remove();
})
</script>
初始
點擊刪除按鈕之后
可以看到使用remove方法刪除之后，整個 id=middle的節點包括里面的數據都沒有，該節點所包含的所有后代節點和后代節點的數據都沒有了
例子3(將所有符合的刪除)
<div class="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
//刪除所有元素為div的節點
$("div").remove();
})
</script>
初始
點擊刪除按鈕之后
可以看到使用remove方法刪除之后，所有元素是div的節點包括里面的數據和沒了
例子4(傳遞參數來選擇性地刪除元素)
remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。該參數可以是任何 jQuery 選擇器的語法。
例子：
<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script src="jquery-1.11.3.min.js"></script>
<script>
$("input").on('click', function() {
//刪除所有元素為div的節點
$("div").remove("div[id!=foot]");
})
</script>
點擊前
點擊刪除按鈕之后
例子：
<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
//刪除所有元素為div的節點
$("div").filter("#foot").remove();
})
</script>
點擊前
點擊刪除按鈕之后
之前有講過：
（1）不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用這些匹配的元素。
雖然在前面已經把元素從文檔中被移除但其實將其從jQuery對象中移除，因此我們還可以使用該jQuery對象，將它再次放入文檔中
簡而言之，就是被刪除的元素是可以被找回來的。
當某個節點用remove()方法刪除時。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。下面的JQuery代碼說明元素用remove()方法刪除后，還是可以繼續使用的。
例子1
<div class="header"></div>
<div id="middle">你好</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("body");
})
</script>
初始
刪除再追回代碼
例子2：
<div class="header">hello</div>
<div id="middle">
你好
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo(".header");
})
</script>
初始
刪除再追回代碼
例子3
<div id="header">hello</div>
<div id="middle">
你好
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("#foot");
})
</script>
初始
刪除再追回代碼
如果說只是想把一個元素移動到另一個位置，那我們完全不需要寫這么復雜，
可以直接使用appendTo()方法的特性來簡化以上代碼，JQuery代碼如下：
var $li =$("#middle").remove(); $li.appendTo("#foot");
寫成$("#middle").appendTo("#foot");
這就是移動操作，這些在之前的文章jquery實現動態添加html代碼中有講過。
相似的還有prependTo(),prepend (),append (),brefore(),insertBefore(),insertAter(),after()
（2）這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 數據。其他的比如綁定的事件、附加的數據等都會被移除。
例子1：（元素的屬性指定的事件不會被刪除）
<style>
.box{
width:500px;
height:500px;
background:#eee;
color:#fff;
border:1px solid #eee;
}
.box_inner{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
.box_inner:hover{
background:red;
color:green;
}
</style>
</head>
<body>
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("#foot");
})
</script>
解析：
圖中的綠色部分有個hover變色效果，我們點擊按鈕刪除代碼有加上發現仍有hover變色效果
例子2：（JQuery動態綁定的事件會被刪除）
<style>
.box{
width:500px;
height:500px;
background:#eee;
color:#fff;
border:1px solid #eee;
}
.box_inner{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("#foot");
})
$(".box_inner").hover(
function(){
$(this).css({"background":"red","color":"green","cursor":"pointer"});
},
function(){
$(this).css({"background":"green","color":"#fff"});
})
</script>
解析：
圖中的綠色部分有個hover變色效果，我們點擊按鈕刪除代碼又追回元素發現hover效果已經沒有效果。
**延伸：
如果是移動操作的話，JQuery動態綁定的事件是不被刪除的。
**
例子3：（直接在元素節點中綁定的事件不會被刪除）
<style>
.box{
width:500px;
height:500px;
background:#eee;
color:#fff;
border:1px solid #eee;
}
.box_inner{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner" onmouseover="over(this)" onmouseout="out(this);">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("#foot");
})
function over(obj) {
$(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) {
$(obj).css({"background":"green","color":"#fff"});
};
</script>
解析：
圖中的綠色部分有個hover變色效果，我們點擊按鈕刪除代碼有加上發現仍有hover變色效果
例子4(元素關聯的data值會被刪除)
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
var $div2=$(".box_inner");
$div2.data("value", 1);
console.log($(".box_inner").data("value"));
$("input").on('click', function() {
var $li =$("#middle").remove();
$li.appendTo("#foot");
console.log($(".box_inner").data("value"));
})
</script>
解析：第二個undefined是按鈕點擊后打印的附加數據的值，這也就是刪除后再追回元素的jquery的附加數據是undefined，但是初始值是1，可以得知：jquery的相關數據是被刪掉了。
2.empty()
描述: 從DOM中移除集合中匹配元素的所有子節點。
語法：.empty()
**這個方法不接受任何參數
這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因為，根據說明，元素里任何文本字符串都被看做是該元素的子節點。
但是需要注意的是：
他不會刪除自身節點
**
例子1：
<div id="header"></div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
$("#middle").empty();
})
</script>
初始
刪除后
empty()函數與html()函數具有以下等價代碼：
$("p").empty( );
// 等價於
$("p").html("");
例子2：（返回的對象不包括刪除的子元素，只保留節點。）
<div id="header"></div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
var $li =$("#middle").empty();
$li.appendTo("#foot");
})
</script>
刪除再追回代碼
例子3（empty()表示移除的是選擇器的所有子元素，返回的是選擇器選中的元素。在如何處理被刪除元素的data值和事件處理函數時，其表現和detach()一致，會保留刪除元素的data值和事件處理函數。）
（JQuery動態綁定的事件不會被刪除）
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="middle">
我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script src="jquery-1.11.3.min.js"></script>
<script>
$("input").on('click', function() {
var $li =$("#middle").empty();
$li.appendTo("#foot");
})
$("#middle").hover(
function(){
$(this).css({"background":"red","color":"green","cursor":"pointer"});
},
function(){
$(this).css({"background":"green","color":"#fff"});
})
</script>
例子4（直接在元素節點中綁定的事件不會被刪除）
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="middle" onmouseover="over(this)" onmouseout="out(this);">
我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
var $li =$("#middle").empty();
$li.appendTo("#foot");
})
function over(obj) {
$(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) {
$(obj).css({"background":"green","color":"#fff"});
};
</script>
例子5（會保留刪除元素的data值）
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
var $div2=$("#middle");
$div2.data("value", 1);
console.log($("#middle").data("value"));
$("input").on('click', function() {
var $li =$("#middle").empty(); ;
$li.appendTo("#foot");
console.log($("#middle").data("value"));
})
</script>
第二個1是按鈕點擊后打印的附加數據的值，這也就是刪除后再追回元素的jquery的附加數據是1，但是初始值是1，可以得知：jquery的相關數據是沒有被刪除。
3. detach()
定義和用法
detach() 方法移除被選元素，包括所有文本和子節點。
這個方法會保留 jQuery 對象中的匹配的元素，因而可以在將來再使用這些匹配的元素。
detach() 會保留所有綁定的事件、附加的數據，這一點與 remove() 不同。
當然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數據
語法：$(selector).detach()
例子1（刪除子節點，所有文本和本身節點）
刪除后
例子2(傳遞參數來選擇性地刪除元素)
detach()方法也可接受一個參數（選擇器表達式），允許您對被刪元素進行過濾。該參數可以是任何 jQuery 選擇器的語法。
例子1：
<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script type="text/javascript">
$("input").on('click', function() {
$("div").detach("div[id!=foot]");
})
</script>
點擊前
刪除后
例子3（元素追回）
不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用這些匹配的元素。
雖然在前面已經把元素從文檔中被移除
但其實將其從jQuery對象中移除，因此我們還可以使用該jQuery對象，將它再次放入文檔中
簡而言之，就是被刪除的元素是可以被找回來的。
例子：
<div id="header"></div>
<div id="middle">
<div>
你好
</div>
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
var $li=$("#middle").detach();
$li.appendTo("#foot");
})
</script>
初始
刪除后找回
例子（JQuery動態綁定的事件不會被刪除）：
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="middle">
我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
var $li =$("#middle").detach();
$li.appendTo("#foot"); })
$("#middle").hover(
function(){
$(this).css({"background":"red","color":"green","cursor":"pointer"});
},
function(){
$(this).css({"background":"green","color":"#fff"});
})
</script>
例子（直接在元素節點中綁定的事件不會被刪除）
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="middle" onmouseover="over(this)" onmouseout="out(this);">
我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除" />
<script>
$("input").on('click', function() {
var $li =$("#middle").detach();
$li.appendTo("#foot");
})
function over(obj) {
$(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) {
$(obj).css({"background":"green","color":"#fff"});
};
</script>
例子（會保留刪除元素的data值）
<style>
#middle{
width:200px;
height:200px;
margin:100px;
background:green;
color:#fff;
}
</style>
</head>
<body>
<div id="header">hello</div>
<div id="middle">
<div class="box">
<div class="box_inner">
我還在
</div>
</div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
var $div2=$("#middle");
$div2.data("value", 1);
console.log($("#middle").data("value"));
$("input").on('click', function() {
var $li =$("#middle").detach();
$li.appendTo("#foot");
console.log($("#middle").data("value"));
})
</script>
第二個1是按鈕點擊后打印的附加數據的值，這也就是刪除后再追回元素的jquery的附加數據是1，但是初始值是1，可以得知：jquery的相關數據是沒有被刪除。
4.三者的對比
最后，我們看下這三者的對比圖
本文為原創，如需轉載請注明轉載地址，謝謝合作！
本文地址：http://www.cnblogs.com/wanghuih/p/6143577.html