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基础第一章 JavaScript与用户端
Jul 22 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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中使用匿名函数操作数据库的例子
2014/11/17 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
jQuery 解析xml文件
2009/08/09 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
python实现无证书加密解密实例
2014/10/27 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
PHP面试题集
2016/12/18 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
文秘专业自荐信
2013/10/14 职场文书
个人自荐信
2013/12/05 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
继电保护工岗位职责
2014/01/05 职场文书
教师演讲稿开场白
2014/08/25 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
表扬信格式模板
2015/05/05 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python