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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
JS数组的高级使用方法示例小结
Mar 14 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
python实现公司年会抽奖程序
2019/01/22 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
技术股份合作协议书
2014/10/05 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
企业整改报告范文
2014/11/08 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
Python的三个重要函数详解
2022/01/18 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS