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多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
React组件的三种写法总结
Jan 12 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
layui复选框的全选与取消实现方法
Sep 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 中的4种标记风格介绍
2012/05/10 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
javascript异步编程的4种方法
2014/02/19 Javascript
javascript操作数组详解
2014/12/17 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python3 实现调用串口功能
2019/12/26 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
老师对学生的寄语
2014/04/09 职场文书
拉歌口号大全
2014/06/13 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
优秀员工自荐书
2015/03/06 职场文书
多人股份制合作协议书
2016/03/19 职场文书
护理自荐信
2019/05/14 职场文书
Python中tqdm的使用和例子
2022/09/23 Python