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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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多用户计数器代码
2007/03/11 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
javascript 数组排序函数
2009/08/20 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python中的推导式使用详解
2015/06/03 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
销售员自我评价怎么写
2013/09/19 职场文书
十八大闭幕感言
2014/01/22 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
中学教师师德承诺书
2014/05/23 职场文书
小学教师自我评价
2015/03/04 职场文书
失恋33天观后感
2015/06/11 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
python析构函数用法及注意事项
2021/06/22 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android