jQuery中DOM节点删除之empty与remove


Posted in Javascript onJanuary 20, 2017

前言

最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享。本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧。

.empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素)。

.remove()是指删除该节点,结果是删除该节点(该节点及其后代元素都将不存在)。

下面放代码来说明。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js "></script>
 <style>
  body{
   background: #ffe5aa;
  }
  #test1{
   width:100px;
   height:100px;
   background: #3db7ff;
  }
  #test2{
   width:100px;
   height:100px;
   background: #ff179f;
  }
 </style>
</head>
<body>
 <div class="whole">
  <button class="bt1">通过empty删除节点</button>
  <button class="bt2">通过remove删除节点</button>
 </div>
 <div id="test1">
  <p>元素1</p>
  <p>元素2</p>
 </div>
 <div id="test2">
  <p>元素3</p>
  <p>元素4</p>
 </div>
 <script type="text/javascript">
  $(".bt1").on('click',function(){
   $("#test1").empty();
  })
   $(".bt2").on('click',function(){
   $("#test2").remove();
  })
 </script>
</body>
</html>

点击运行后,出现以下画面。

jQuery中DOM节点删除之empty与remove

点击button1,将执行.empty()指令,预期将删除test1子节点元素。结果如下。

jQuery中DOM节点删除之empty与remove

再点击button2,将执行.remove()指令。预期将删除test2及其后代子节点元素。结果如下。

jQuery中DOM节点删除之empty与remove

总结

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

Javascript 相关文章推荐
jquery动态加载图片数据练习代码
Aug 04 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
如何在Python对Excel进行读取
2020/06/04 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
工商管理自荐书
2014/07/06 职场文书
预备党员自我评价范文
2015/03/04 职场文书
消防宣传标语大全
2015/08/03 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
详解Python中的进程和线程
2021/06/23 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
angular4实现带搜索的下拉框
2022/03/25 Javascript
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang