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 操作两个select实现值之间的互相传递
Mar 07 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
vue实现前端列表多条件筛选
Oct 26 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
关于js与php互相传值的介绍
2013/06/25 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
简单的JS多重继承示例
2008/03/13 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery禁用右键示例
2014/04/28 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
python批量修改文件编码格式的方法
2018/05/31 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
宿舍违规检讨书
2014/01/12 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
自行车广告词大全
2014/03/21 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
承诺书模板
2014/08/30 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
从事会计工作年限证明
2015/06/23 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技