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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
质量整改报告范文
2014/11/08 职场文书
2016年元旦主持词
2015/07/06 职场文书
办公室管理规章制度
2015/08/04 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang