detach()
移除被选元素,包括所有文本和子节点。
该方法会保留移除元素的副本,允许它们在以后被重新插入。(这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。)
remove()
移除被选元素,包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
该方法也会移除被选元素的数据和事件。(但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。)
注意:这里被移除的数据和事件:只是jq动态绑定的事件和数据,元素本身具有的事件和数据不会丢失、依然可以恢复。(参考示例)
empty()
从被选元素移除所有内容,包括所有文本和子节点。
该方法不会移除被选元素本身,或它的属性。
总结:
如需移除元素,但保留数据和事件,请使用 detach() 方法代替。
如需移除元素及它的数据和事件,请使用 remove() 方法代替。
如只需从被选元素移除内容,请使用 empty() 方法。
示例代码:
<div id="main">
<div id="divTest11" style="background-color:red;width:300px;height:100px" onclick="divTest11();">
<p onclick="pfind()">divTest11</p>
</div>
<br />
<button onclick="detach()">detach</button> <button onclick="find11()">匹配11</button>
<br />
<div id="divTest22" style="background-color:green;width:300px;height:100px" onclick="divTest22();">
<p onclick="pfind()">divTest22</p>
</div>
<br />
<button onclick="remove()">remove</button> <button onclick="find11()">匹配22</button>
<br />
<div id="divTest33" style="background-color:grey;width:300px;height:100px" onclick="divTest33();">
<p>divTest33</p>
</div>
<br />
<button onclick="empty()">empty</button> <button onclick="find11()">匹配33</button>
<div>
$(function() {
// jq动态绑定的方法:remove()方法不会保留此方法
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
var htmlText;
function detach() {
htmlText = $("#divTest11").detach();
}
function remove() {
htmlText = $("#divTest22").remove();
}
function empty() {
htmlText = $("#divTest33").empty();
}
function find11() {
$("#main").prepend(htmlText);
}
// 此方法、p元素会一直存在。
function pfind() {
alert("pppp");
}
可实例运行出结果、此处不再记载。