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侧边栏随窗口滚动实现方法
Mar 04 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
javascript函数特点实例分析
May 14 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 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
图解上海144收音机
2021/03/02 无线电
写一个用户在线显示的程序
2006/10/09 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python_mask_array的用法
2020/02/18 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
2014年统战工作总结
2014/12/09 职场文书
同学聚会通知书
2015/04/20 职场文书
欢送会主持词
2015/07/01 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python