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使用location.search的示例
Nov 05 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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
数据库的日期格式转换
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
vue如何判断dom的class
2018/04/26 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python3编码问题汇总
2016/09/06 Python
python实现指定ip端口扫描方式
2019/12/17 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
浅谈Python协程
2020/06/17 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
struct和class的区别
2015/11/20 面试题
授权委托书格式模板
2014/04/03 职场文书
验房委托书
2014/08/30 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
办公室卫生管理制度
2015/08/04 职场文书
超市员工管理制度
2015/08/06 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
《灰雀》教学反思
2016/02/19 职场文书