jQuery的remove和detach的区别

1、remove([expr])

概述:从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

2、detach([expr])

概述:从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留。

实例:

<div id="google">Google</div>
<div id="apple">Apple</div>

<script>
$(function () {
$("#apple").hover(function () {
$(this).text("Google+");
});
//使用 remove() hover()事件也会被删除
//apple = $("#apple").remove();

//使用detach() hover()事件会保存下来
apple = $("#apple").detach();
$("body").append(apple);

});
时间: 2024-10-03 22:53:49

jQuery的remove和detach的区别的相关文章

jquery 中remove()与detach()的区别

remove()与detach()方法都是从dom中删除所有的元素 两者的共同之处在于都不会把匹配的元素从jQuery对象中删除. 不同之处在于用remove()删除的元素,除了元素被保留,其他的在这个元素上的绑定事件等都会被移除,但是detach()方法不会移除这个元素上的方法或者是附加数据. 简单举例: html: <body><p>区别</p></body> js: p元素的绑定事件 $("p").click(function(){

探索jquery方法中empty,remove与detach的区别

最近一直疑惑此三种方法的具体区别在于何处,随即想弄明白其具体的区别,看了一些说明,也依照官方文档,终于把这三个方法弄明白了,果然功夫不负有心人,继续努力. 上正文,先简单介绍下这三种方法 .empty()  描述: 从DOM中移除集合中匹配元素的所有子节点. 这个方法不接受任何参数. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="container">

转载JQuery 中empty, remove 和 detach的区别

转载 http://www.cnblogs.com/lisongy/p/4109420.html .empty()  描述: 从DOM中移除集合中匹配元素的所有子节点. 这个方法不接受任何参数. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="container"> <div class="hello">Hello<

jQuery 元素移除empty() remove()与detach()的区别?

@1.empty() 删除匹配元素集合中所有的后代字节点元素: <p>hello<span>world</span></p> $("p").empty();   <p></p> @2.remove([expr]) 接收参数表示删除指定的元素 $("p").remove()  删除所有段落 $("p").remove(".hel") 删除带有.hel类名的段

jQuery中remove()和empty()的区别

要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置.remove([expr])则是把其从dom中删除,而不会保留其所占的位置.例:<p>Hello</p>W

jQuery中删除节点方法remove()、detach()、empty()分析

jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并不会删除.举个栗子: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>remove和detach对

JQuery和JavaScript常用方法的一些区别

jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQuery 常用方法比较 1.加载DOM区别 JavaScript: window.onload function firs

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jquery clone 与 clone(true) 的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery-1.4.3.js" type="text/javascript"></script> <s