jQuery 学习-DOM篇(四):jQuery 删除 DOM 元素的方法
推荐阅读
Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506
Helm3(K8S 资源对象管理工具)博客专栏:https://blog.csdn.net/xzk9381/category_10895812.html
本文原文链接:https://blog.csdn.net/xzk9381/article/details/113372601,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。
一、empty() 方法
使用 empty() 方法可以删除指定元素内的所有子元素:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('#div1').empty();})</script>
</head>
<body><div id="div1"><span>测试</span><div>测试</div><input type="button" value="测试"></div>
</body>
</html>
二、remove() 方法
remove() 方法和 empty() 方法一样,都是用于移除元素。但是 remove 方法会将元素自身也移除,同时也会移除元素内部所有的数据,包括绑定的事件以及与该元素有关的 jQuery 数据。同时也可以使用参数来过滤要删除的内容,这个参数可以是 jQuery 中的选择器。
1. 删除所有元素
例如删除所有 class 为 div1 的元素:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('.div1').remove()})</script>
</head>
<body><div class="div1">测试1</div><div class="div1">测试2<span>span 标签</span></div><div class="div1">测试3</div><div class="div1">测试4</div><div class="div1">测试5</div>
</body>
</html>
2. 删除元素集合中的指定元素
例如删除元素集合中索引值等于 2 的元素:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('.div1').remove(':eq(2)');})</script>
</head>
<body><div class="div1">测试1</div><div class="div1">测试2<span>span 标签</span></div><div class="div1">测试3</div><div class="div1">测试4</div><div class="div1">测试5</div>
</body>
</html>
删除元素集合中包含内容 “测试4” 的元素:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('.div1').remove(':contains("测试4")');})</script>
</head>
<body><div class="div1">测试1</div><div class="div1">测试2<span>span 标签</span></div><div class="div1">测试3</div><div class="div1">测试4</div><div class="div1">测试5</div>
</body>
</html>
需要注意的是,如果只使用 .div1 选择器,是无法删除子元素 span 的。如果要删除 span 标签,选择器可以使用 $(’.div1 span’)。
三、detach() 方法
detach() 方法处理的效果与 remove() 方法一样,同样支持传递参数。但是 detach() 会将删除的对象保留在内存中,也就是说在删除元素后,还可以继续在内存中对该元素进行操作。
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('div').click(function (){console.log($(this).html());})$('#btn1').click(function(){$.data(div1,'type','detach');var mydiv = $('#div1').detach();$('body').append(mydiv);console.log($.data(div1));})$('#btn2').click(function(){$.data(div2,'type','remove');var mydiv = $('#div2').remove();$('body').append(mydiv);console.log($.data(div2));})})</script>
</head>
<body><div id="div1" style="width: 100px;height: 20px;background: #ccc;margin-top: 20px;">detach 测试</div><div id="div2" style="width: 100px;height: 20px;background: orange;margin-top: 20px;">remove 测试</div><input type="button" value="detach 删除" id="btn1" style="margin-top: 20px;"><input type="button" value="input 删除" id="btn2" style="margin-top: 20px;">
</body>
</html>
运行上面的代码可以看出,两种方法删除的元素都可以通过变量的方式存储在内存中。不同的是,使用 detach 方法删除的元素在重新插入时,可以保留事件和数据,而 remove 方法删除的元素则不会保留事件和数据。
本文原文链接:https://blog.csdn.net/xzk9381/article/details/113372601,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。
jQuery 学习-DOM篇(四):jQuery 删除 DOM 元素的方法相关推荐
- JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- JQuery学习22篇(事件委托)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习(六)—jQuery对象的创建
jQuery学习(六)-jQuery对象的创建
- jQuery学习(三)—jQuery使用步骤以及注意事项
jQuery学习(三)-jQuery使用步骤以及注意事项 jQuery的使用步骤: 第一步:利用script标签将jQuery文件引入到当前的HTML中 第二步:在文档中插入一个新的script标签在 ...
- jQuery学习(二)—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
- python 可以根据元素值删除的是_python中删除某个元素的方法解析
这篇文章主要介绍了python中删除某个元素的方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python中关于删除list中的某个元素,一 ...
- jq删除数组查找指定值_jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作,和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
- jQuery 学习-样式篇(九):jQuery 存储和删除元素私有数据的方法
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
最新文章
- Mysql日志-RedoLog、UndoLog和BinLog的关系捋顺
- zookeeper zoo.cfg配置文件
- P1-0:项目框架搭建
- jggrid标红列和动态标红行的几种方法
- HTML5 header元素
- PML之平均 、中值 、众数、标准偏差、方差
- 我33岁,从国企主管零基础转型大数据开发,年薪涨了20W
- MongoDB索引概念及使用详解
- 015.4守护线程和join
- 三维地理信息系统空间的可视化分析
- 使用WireShark生成地理位置数据地图
- SPSS学习资料汇总
- 阿里云服务器使用宝塔面板管理以及项目部署
- Android平台压缩纹理ETC2 VS ASTC
- python 稠密重建_使用openMVG+PMVS实现视觉三维重建
- fail2ban 的使用
- 令人头大的慢查询分析
- 从2012 飞到 2013 —— 梦想依旧
- 微信网页开发(6)--图像接口
- 手把手带你学Docker:Docker容器日常管理(四)
热门文章
- 常见的HTT相应状态码
- 华为云-容器引擎CCE-部署Nginx应用
- 关于微信小程序常见的运算符
- 实现python调用Matlab的.m文件
- 关于bootstrap-table冻结列生成多个冻结表头和表格主体的问题
- 简历,求职求项目,硕士-4年工作经验-2年管理经验
- STM32从零开始(四)详解GPIO库函数
- STM32学习笔记1——软硬件基础之keil5编程与GPIO开发
- LSTM神经网络实现对股市收盘价格的预测实战(python实现 附源码 超详细)
- pythonweb数据可视化_独家 | 基于Python实现交互式数据可视化的工具(用于Web)