empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除。

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

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

举个栗子:

 <body>
<div id="div1" style="height: 100px;width: 300px;border: 1px solid black;background: yellow;">
this is some text in the div.
<p id="panel">pppp</p>
<p>two ppppppp</p>
</div>
<button>删除div元素</button>
</body>

empty():清空节点,保留自身。

$('button').click(function () {
$('#div1').empty();
})

效果:

remove():删除被选元素极其子元素。

$('button').click(function () {
$('#div1').remove();
})

效果:

detach()方法同detach,但是可以保留jquery相关的数据和绑定事件。

 $('#panel').hover(function () {
$(this).css('color','red');
})
var deleteP = $('#panel').detach();
$('#div1').append(deleteP);

效果:

如果用remove()不会保留数据和绑定事件。

$('#panel').hover(function () {
$(this).css('color','red');
})
var deleteP = $('#panel').remove();
$('#div1').append(deleteP);

效果:p不会改变颜色,hover不起作用

 关于追加之后p跑到下边问题:

首先,你通过$("p").detach()把上面的p给“删除/隐藏”了,实际上p还是存在的,只是你看不到了。
然后你又用
$("body").append($("p").detach());
向body中添加元素,这个元素其实还是p。

不是p跑到下面,而是你把p给“复制”了一个并添加到最下面,原来的p给隐藏了。

提示:如需移除元素,但保留数据和事件,请使用 detach() 方法。

提示:如需移除元素及它的数据和事件,请使用 remove() 方法。

提示:如只需从被选元素移除内容,请使用 empty() 方法。

jQuery中删除方法empty(),remove()和detach()的区别的更多相关文章

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

    @1.empty() 删除匹配元素集合中所有的后代字节点元素: <p>hello<span>world</span></p> $("p&quo ...

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

    最近一直疑惑此三种方法的具体区别在于何处,随即想弄明白其具体的区别,看了一些说明,也依照官方文档,终于把这三个方法弄明白了,果然功夫不负有心人,继续努力. 上正文,先简单介绍下这三种方法 .empty ...

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

    转载 http://www.cnblogs.com/lisongy/p/4109420.html .empty()  描述: 从DOM中移除集合中匹配元素的所有子节点. 这个方法不接受任何参数. 这个 ...

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

    jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...

  5. JavaScript 中 empty、remove 和 detach的区别

    内容 empty.remove 和 detach的区别 jQuery 操作 DOM 之删除节点 方法名 元素所绑定的事件及数据是否也被移除 作用 $(selector).empty() 是 从被选元素 ...

  6. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

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

    remove()与detach()方法都是从dom中删除所有的元素 两者的共同之处在于都不会把匹配的元素从jQuery对象中删除. 不同之处在于用remove()删除的元素,除了元素被保留,其他的在这 ...

  8. jQuery的remove和detach的区别

    1.remove([expr])   概述:从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的 ...

  9. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

随机推荐

  1. maven+eclipse+jboss+oracle 12c+memcached+AngularJS

    Maven 参考梁总的: Eclipse Java EE IDE for Web Developers集成的Maven 3 指向自己安装的 Maven Maven下载.安装和配置(二) 在本地配置ma ...

  2. 利用微软RD Client APP远程连接PC(附外网连接方法)

    一.下载RD Client 这个就不用多说了... 二.设置PC允许远程桌面连接 PC系统以win10为例: 1.进入“远程设置”允许远程协助与远程桌面连接 桌面右键单击“此电脑”,属性,单击左边“远 ...

  3. PHP安装Eclipse与使用

    PHP有非常多相当不错的开发工具,如Zend Studio.NetBeans.phpdesigner等,但对于习惯Java编程的程序员们来说,最经常使用的还要属Eclipse. 那么Eclipse能用 ...

  4. 分布式job-任务调度(一)

    什么是任务调度: 任务调度:在单位时间内,去调用某个方法或者执行某段代码 java实现方式: 方法一(使用线程实现): public static void ThreadTskScheduling() ...

  5. python 操作excel

    操作excel安装的三种方式: 1.pip instaill xlwt    #写excel   pip instaill  xlrd    #读excel      pip instaill  xl ...

  6. MYSQL-联合索引

    深入理解 index merge 是使用索引进行优化的重要基础之一.理解了 index merge 技术,我们才知道应该如何在表上建立索引. 1. 为什么会有index merge 我们的 where ...

  7. iOS字典转字符串方法

    新建Object文件 .h文件中 +(NSString *)convertToJsonData:(NSDictionary *)dict: .m文件中 +(NSString *)convertToJs ...

  8. c++字节对齐

    参考URL: http://blog.csdn.net/hairetz/article/details/4084088 0 字节对齐的意义按我的理解是便于cpu一次取完所有数据, 提高代码的执行效 1 ...

  9. ubuntu16.04上安装ros-kinetic

    1.设置安装源 sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" ...

  10. Kafka connect in practice(3): distributed mode mysql binlog ->kafka->hive

    In the previous post Kafka connect in practice(1): standalone, I have introduced about the basics of ...