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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
红米手机抢购的js代码
Mar 10 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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数组的使用方法小结
2010/09/23 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
什么是Python中的顺序表
2020/06/02 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
机关作风建设自查报告
2014/10/22 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
边城读书笔记
2015/06/29 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python