开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

DOM——节点删除.empty()、remove()和.detach()

简介:
+关注继续查看

      节点删除.empty()、remove()和.detach()

1   empty清空方法,与删除不一样,只移除了指定元素中的所有子节点,不仅移除子元素(和其他后代元素),同样移除元素里的文本,如<div class="hello"><p>慕课网</p></div>

2   通过empty方法移除里面div的所有元素,只是清空内部的html代码,但是标记仍然留在DOM中,如//通过empty处理

                               $('.hello').empty()

                               //结果:<p>慕课网</p>被移除

                               <div class="hello"></div>

3   remove会将元素自身移除,也会移除元素内部的一切,包括绑定的事件及与该元素相关的JQuery数据,如<div class="hello"><p>慕课网</p></div>

                                         $('.hello').on("click",fn)

4   如果不通过remove方法删除这个节点,但是同时需要把事件给销毁掉,是为了防止内存泄漏,所以在前端开发中绑了多少事件,不用的时候一定要记得销毁

5   通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,如//通过remove处理

             $('.hello').remove()

             //结果:<div class="hello"><p>慕课网</p></div>全部被移除

            //节点不存在了,同时事件也会被销毁

6   remove表达式参数

   remove比empty更好用的是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点

7   通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,如$("p").filter(":contains('3')").remove()

8   empty()和remove()的区别

   empty()不删除节点,只是清空节点,能清空元素中的所有后代节点,但是不能删除自己本身这个节点

   remove()该节点与包含的所有后代节点将同时被删除,提供传递一个筛选的表达式,删除置顶和集中的元素

9   detach()临时删除页面上的节点,不让节点上的数据和事件丢失,能在下一个时间段让这个删除的节点显示到页面,即从当前页面中移除该元素,但保留这个元素的内存模型对象,如$("p").detach()

10   .remove()和.detach()的不同

   .remove()事件及数据会被删除

   .detach()所有绑定的事件、附加的数据等都会保留下来

11   .remove()和.detach()的共同点

    .remove()和.detach()都支持选择器表达

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



本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1983517

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python Elasticsearch DSL 查询、过滤、聚合操作实例
Index:Elasticsearch用来存储数据的逻辑区域,它类似于关系型数据库中的database 概念。一个index可以在一个或者多个shard上面,同时一个shard也可能会有多个replicas。 Document:Elasticsearch里面存储的实体数据,类似于关系数据中一个table里面的一行数据。
213 0
Django setting.py添加app
在django创建app中,修改models.py添加对应的数据库表,后执行 makemigrations Mynewsite 提示: App Mynewsite could not be found.
1325 0
第05章节-Python3.5-Django的CBV和FBV 4
4. FBV & CBV function base view url.py index -> 函数名 view.py def 函数(request): .
1217 0
23703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载