• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery中DOM节点删除之empty与remove

jQuery中DOM节点删除之empty与remove

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了jquery转dom,jquery对象转dom对象,jquery和dom,jquery 删除dom,jquery和dom的区别等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享。本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧。

.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>
</div>

点击运行后,出现以下画面。

点击button1,将执行.empty()指令,预期将删除test1子节点元素。结果如下。

再点击button2,将执行.remove()指令。预期将删除test2及其后代子节点元素。结果如下。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 使用jQuery操作DOM的方法小结
  • jQuery为DOM动态追加事件的方法
  • jQuery中DOM节点的删除方法总结(超全面)
  • jQuery中DOM节点删除之empty与remove
  • jQuery使用正则表达式替换dom元素标签用法示例

相关文章

  • 2017-05-11Vue.js实现多条件筛选、搜索、排序及分页的表格功能
  • 2017-05-11作为老司机使用 React 总结的 11 个经验教训
  • 2017-05-11正则表达式基本语法及表单验证操作详解【基于JS】
  • 2017-05-11Vue.js -- 过滤器使用总结
  • 2017-05-11JavaScript数据结构学习之数组、栈与队列
  • 2017-09-04window.scroll(To)为什么不能在页面load完成后自动滚动?
  • 2017-05-11微信小程序 WebSocket详解及应用
  • 2017-05-11Bootstrap3多级下拉菜单
  • 2017-05-11对称加密与非对称加密优缺点详解
  • 2017-05-11js遍历json对象所有key及根据动态key获取值的方法(必看)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js undefined 和 null
    • 详谈$.data()的用法和作用
    • NodeJs下的测试框架Mocha的简单介绍
    • 谈谈JavaScript数组常用方法总结
    • jQuery展示表格点击变色、全选、删除
    • 基于node.js依赖express解析post请求四种数据格式
    • 源码分析Vue.js的监听实现教程
    • 老生常谈combobox和combotree模糊查询
    • Bootstrap缩略图的创建方法
    • js实现背景图自适应窗口大小

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有