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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
JS排序之快速排序详解
Apr 08 Javascript
详解angular应用容器化部署
Aug 14 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
iview实现图片上传功能
Jun 29 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php session应用实例 登录验证
2009/03/16 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python中split方法用法分析
2015/04/17 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python实现抖音点赞功能
2019/04/07 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python matplotlib实时画图案例
2020/04/23 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
教育实习生的自我评价分享
2013/11/21 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
矿泉水广告词
2014/03/20 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书