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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
限制只能输入数字的实现代码
May 16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
原生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 Socket 编程
2010/04/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
XML的代替者----JSON
2007/07/21 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
javascript学习之json入门
2016/12/22 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python得到单词模式的示例
2018/10/15 Python
python 求10个数的平均数实例
2019/12/16 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Java面试题汇总
2015/12/06 面试题
消防安全检查制度
2014/02/04 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
mysql优化
2021/04/06 MySQL
python 中的@运算符使用
2021/05/26 Python