jQuery 删除/替换DOM元素的几种方式


Posted in Javascript onMay 20, 2014

删除

删除操作非常简单,直接在结果集后链式调用remove()方法即可。

例如,要删除以下html脚本中所有的a元素,直接通过

$('a'.remove();

就可以做到了。
<h3>Anchors</h3> 
<a href="#" class="remove">Anchor Element</a> 
<a href="#">Anchor Element</a> 
<a href="#" class="remove">Anchor Element</a>

当然也可以通过向remove传参的形式来过滤选择结果,然后再执行remove操作。

$('a').remove('.remove');

需要注意的是

remove操作并不会把符合条件的元素从结果集中删除,所以理论上可以继续操作被"删除"掉的元素
remove操作不但会“删除”元素与所有元素相关的数据也会被删除(event handlers、internally cached data)

替换

如果想要把class为remove的li元素替换为<li>removed</li>,可以使用以下两种等价的方法

$('li.remove').replaceWith('<li>removed</li>); 
$('<li>removed</li>;).replaceAll('li.remove');
Javascript 相关文章推荐
JS 实现导航栏悬停效果
Sep 23 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
php实例分享之实现显示网站运行时间
May 20 #Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 #Javascript
JQuery弹出层示例可自定义
May 19 #Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 #Javascript
js跨域访问示例(客户端/服务端)
May 19 #Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 #Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 #Javascript
You might like
PHP网上调查系统
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python多线程并发实例及其优化
2019/06/27 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
windows下python安装pip方法详解
2020/02/10 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
django 取消csrf限制的实例
2020/03/13 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
报到证办理个人委托书
2014/10/06 职场文书
六查六看六改心得体会
2014/10/14 职场文书
实习单位指导教师评语
2014/12/30 职场文书
社区元宵节活动总结
2015/02/06 职场文书
体育个人工作总结
2015/02/09 职场文书
事业单位岗位说明书
2015/10/08 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android