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 相关文章推荐
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python中常用的九种预处理方法分享
2016/09/11 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python实现Flappy Bird源码
2018/12/24 Python
python 实现敏感词过滤的方法
2019/01/21 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
年终总结会议主持词
2014/03/17 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
防汛通知
2015/04/25 职场文书