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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
javascript条件式访问属性和箭头函数介绍
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 if 想到的些问题
2008/03/22 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python django model联合主键的例子
2019/08/06 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python实现三壶谜题的示例详解
2020/11/02 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
上课看小说检讨书
2014/02/22 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
二年级评语大全
2014/04/23 职场文书
2014年营业员工作总结
2014/11/18 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
房屋维修申请报告
2015/05/18 职场文书
房贷收入证明范本
2015/06/12 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书