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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 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中截取字符串支持utf-8
2007/01/18 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
tensorflow如何批量读取图片
2019/08/29 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
干部考核评语
2014/04/29 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
关键在于落实心得体会
2014/09/03 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
浅析Django接口版本控制
2021/06/26 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang