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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
Express框架之connect-flash详解
May 31 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
工作中常用js功能汇总
Nov 07 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
DC动漫人物排行
2020/03/03 欧美动漫
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Python基本语法经典教程
2016/03/11 Python
python单例模式实例解析
2018/08/28 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
竞职演讲稿范文
2014/01/11 职场文书
新春文艺演出主持词
2014/03/27 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
品质保证书格式
2015/02/28 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL
python和anaconda的区别
2022/05/06 Python