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 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
js实现3D旋转效果
Aug 18 Javascript
原生小程序封装跑马灯效果
Oct 21 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 goto语句简介和使用实例
2014/03/11 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python复制文件代码实现
2013/12/23 Python
python3 flask实现文件上传功能
2020/03/20 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
安全教育感言
2014/03/04 职场文书
行政部岗位职责范本
2014/03/13 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
民族精神月活动总结
2014/08/28 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Oracle锁表解决方法的详细记录
2022/06/05 Oracle
Spring中的@Transactional的工作原理
2022/06/05 Java/Android