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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
页面使用密码保护代码
Apr 10 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
深入koa-bodyparser原理解析
Jan 16 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安装全攻略:APACHE
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP实现简易blog的制作
2016/10/24 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
关于vue面试题汇总
2018/03/20 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python实现飞机大战游戏
2020/10/26 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
保护环境倡议书100字
2014/05/19 职场文书
技术入股合作协议书
2014/10/07 职场文书
英文辞职信范文
2015/05/13 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书