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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JS常见算法详解
Feb 28 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
小程序如何构建骨架屏
May 29 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
js+html实现点名系统功能
Nov 05 Javascript
JS一次前端面试经历记录
Mar 19 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
常用jQuery代码分享
2015/07/14 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python操作 hbase 数据的方法
2016/12/18 Python
使用TensorFlow实现SVM
2018/09/06 Python
python3 线性回归验证方法
2019/07/09 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
禁毒宣传标语
2014/06/19 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android