jQuery的remove()方法使用详解


Posted in Javascript onAugust 11, 2015

remove()方法的定义和用法:

此方法将会从DOM中删除所有匹配的元素。

说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

语法结构:

$(selector).remove(expr)

参数列表:

参数 描述
expr 可选。用于筛选元素的jQuery表达式

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").remove("#first");
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button>点击</button>
</body>
</html>

以下代码能够删除div集合中id为first的div。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#btd").click(function(){
  $("div").remove();
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button id="btd">点击删除第一个div</button>
</body>
</html>

如果省略参数,那就是删除所有匹配的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
 width:200px;
 height:200px;
 border:5px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#btd").click(function(){
  var a=$("div");
  a.remove("#first");
  $("#btn").click(function(){
   alert(a.length);
  })
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button id="btd">删除第一个div</button><button id="btn">查看删除操作后div的数量</button>
</body>
</html>

remove()已经将DOM中的匹配元素删除,但是并没有将它从jquery对象中删除。

jquery使用remove()方法删除指定class子元素的方法

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("p").remove(".italic");
 });
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>Remove all p elements with class="italic"</button>
</body>
</html>

看到这段代码之后,我想不用我过多的解释了。大家就明白了吧,很有意思的方法。

Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
javaScript基础详解
Jan 19 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Python中字符串的格式化方法小结
2016/05/03 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python3 元组tuple入门基础
2020/02/09 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
自我介绍演讲稿
2014/01/15 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
离婚财产分配协议书
2014/10/21 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js