jQuery删除/清空指定元素的所有子节点实例代码


Posted in jQuery onJuly 04, 2019

前言

我们知道可以利有jQuery中的detach()方法和jQuery中的remove()方法删除指定的或是匹配的元素,也可以使用removeClass()方法以及removeAttr()方法删除指定或是匹配元素的类或是属性。那么我们今天说一说利用jQuery如果删除指定或匹配的元素内的子元素和节点!

jQuery中empty()方法的解释

jQuery中的empty()方法:些方法可以清空/删除指定元素下的所以子节点或是内容

语法:

$(selector).empty()

举个大大的“例”字

利用jQuery中的empty()方法移去DIV中的所有内容

jQuery删除/清空指定元素的所有子节点实例代码

HTML代码

<div id="mochu">
  <p>这里是P标签内容</p>
  <p>这里是第二个P标签的内容</p>
</div>

JQ代码

$('#button').click(function(){
  $("#mochu").empty();
})

结果图示

审核源码如下图所示

jQuery删除/清空指定元素的所有子节点实例代码

通过上图我们可以发现,ID为mochu的div标签,里面的P标签和内容都已被删除!

作者有话说

写这篇文章的时候,查阅了三个文档,其中一个文档这样说的,empty()函数应理解为清空指定元素下的子节点,并不是删除指定元素下的子节点。关于这一点,大家看着理解吧。我个人认为,还是清空比较恰当一些!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
You might like
PHP 命令行参数详解及应用
2011/05/18 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
python错误处理详解
2014/09/28 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python的socket编程入门
2018/01/29 Python
python实现AES加密与解密
2019/03/28 Python
PyQt5 多窗口连接实例
2019/06/19 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Django url 路由匹配过程详解
2021/01/22 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
社团活动总结怎么写
2014/06/30 职场文书
贷款委托书怎么写
2014/08/02 职场文书
助残日活动总结
2014/08/27 职场文书
三问三解心得体会
2014/09/05 职场文书
2014年班组长工作总结
2014/11/20 职场文书
 python中的元类metaclass详情
2022/05/30 Python
python+opencv实现目标跟踪过程
2022/06/21 Python