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 相关文章推荐
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
Promise.all中对于reject的处理方法
Aug 01 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
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 常用类整理
2009/12/23 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
RC4文件加密的python实现方法
2015/06/30 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python接口测试文件上传实例解析
2020/05/22 Python
python的flask框架难学吗
2020/07/31 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
连锁超市项目计划书
2014/09/15 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年党支部工作总结
2014/11/13 职场文书
清洁工个人总结
2015/03/04 职场文书
旷工辞退通知书
2015/04/17 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏