jQuery中DOM节点的删除方法总结(超全面)


Posted in Javascript onJanuary 22, 2017

前言

相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题。下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧。

一、empty

empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。

这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中,通过empty移除了当前div元素下的所有p元素 但是本身id=test的div元素没有被删除。

$("button").on('click', function() {
 //通过empty移除了当前div元素下的所有p元素
 //但是本身id=test的div元素没有被删除
 $("#test").empty()
 })

二、remove

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

例如一段节点,绑定点击事件,如果不通过remove方法删除这个节点其实也很简单,但是同时需要把事件给销毁掉,这里是为了防止"内存泄漏",所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁。通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,所以使用使用起来非常简单

remove表达式参数:

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点,我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,如:$("p").filter(":contains('3')").remove()

<body>
 <style>
 .test1 {
 background: #bbffaa;
 }
 
 .test2 {
 background: yellow;
 }
 </style>
 <h2>通过jQuery remove方法移除元素</h2>
 <div class="test1">
 <p>p元素1</p>
 <p>p元素2</p>
 </div>
 <div class="test2">
 <p>p元素3</p>
 <p>p元素4</p>
 </div>
 <button>点击通过jQuery的empty移除元素</button>
 <button>点击通过jQuery的empty移除指定元素</button>
 <script type="text/javascript">
 $("button:first").on('click', function() {
 //删除整个 class=test1的div节点
 $(".test1").remove()
 })

 $("button:last").on('click', function() {
 //找到所有p元素中,包含了3的元素
 //这个也是一个过滤器的处理
 $("p").remove(":contains('3')")
 })
 </script>
</body>

empty和remove区别

用到移除指定元素的时候,jQuery提供了empty()remove([expr])二个方法,两个都是删除元素,但是两者还是有区别

empty方法

  • 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
  • empty不能删除自己本身这个节点

remove方法

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式,用来指定删除选中合集中的元素

三、detach

如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

官方解释:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

当然这里要特别注意,detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据

通过 $("p").detach()把所有的P元素元素删除后,在通过append把删除的p放到页面上,可以通过点击文字测试,事件没有丢失

<body>
 <p>P元素1,默认给绑定一个点击事件</p>
 <p>P元素2,默认给绑定一个点击事件</p>
 <button id="bt1">点击删除 p 元素</button>
 <button id="bt2">点击移动 p 元素</button>
 <script type="text/javascript">
 $('p').click(function(e) {
 alert(e.target.innerHTML)
 })
 var p;
 $("#bt1").click(function() {
 if (!$("p").length) return; //去重
 //通过detach方法删除元素
 //只是页面不可见,但是这个节点还是保存在内存中
 //数据与事件都不会丢失
 p = $("p").detach()
 });

 $("#bt2").click(function() {
 //把p元素在添加到页面中
 //事件还是存在
 $("body").append(p);
 });
 </script>
</body>

detach()和remove()区别

JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略。remove()detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了

通过一张对比表来解释2个方法之间的不同 

方法名 参数 事件及数据是否也被移除 元素自身是否被移除
remove 支持选择器表达 是(无参数时),有参数时要根据参数所涉及的范围
detach 参数同remove 情况同remove

remove:移除节点

  • 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据
  • 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据

detach:移除节点

  • 移除的处理与remove一致
  • remove()不同的是,所有绑定的事件、附加的数据等都会保留下来
  • 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 #Javascript
js实现图片360度旋转
Jan 22 #Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 #Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 #Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP中文汉字验证码
2007/04/08 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python中的函数作用域
2018/05/07 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
详解Python字符串切片
2019/05/20 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
《桥》教学反思
2014/04/09 职场文书
网络编辑求职信
2014/04/30 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python