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. jQuery: 判断from表单是否修改

    <script> $(function() { $("#myform :input").change(function(){ $("#myform" ...

  2. 备份恢复工具xtrabackup安装和使用的记录

    一.安装 下面的方法是在测试环境可以上网的情况下安装的: 提供的是在centos7上安装的方法: 包下载: wget https://www.percona.com/downloads/percona ...

  3. voc-fcn-alexnet网络结构理解

    一.写在前面 fcn是首次使用cnn来实现语义分割的,论文地址:fully convolutional networks for semantic segmentation 实现代码地址:https: ...

  4. Oracle查看表空间

    知道表空间名,显示该表空间包括的所有表. select * from all_tables where tablespace_name='表空间名' 知道表名,查看该表属于那个表空间 select t ...

  5. MariaDB——(二) MariaDB 10.0.15 日志文件—undo 日志

          日志的记录和维护是数据库中相当重要的内容,写这篇文章和后面几篇文章作为学习官网文档的笔记.MariaDB数据库日志可分为二进制日志.查询日志.错误日志.myISAM表日志.relay日志和 ...

  6. 前后台数据交换，printwriter、jsonobject、jsonarray、ajax请求，数据交换

    后台代码: public void findByIDEquipment() { getResponse().setCharacterEncoding("UTF-8"); getRe ...

  7. C# 6.0：Expression – Bodied Methods

    Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性.我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了.Expression- ...

  8. js任意数组按下标相加

    let a=[1,2,3], b=[4,5,6]; let s = a.map(function(v, i) { return v + b[i]; }); console.log(s);

  9. IOC注入框架——Unity中Web.Config文件的配置与调用

    Unity 应用程序块可以从 XML 配置文件中读取配置信息.配置文件可以是 Windows Forms 应用程序的 App.config 或者 ASP.NET 应用程序的 Web.config.当然 ...

  10. mybatis使用枚举优化

    文章转自: https://segmentfault.com/a/1190000010755321 问题 在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: p ...