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获得页面base标签中url的方法
Apr 03 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
Electron 调用命令行(cmd)
Sep 23 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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php简单实现数组分页的方法
2016/04/30 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
javascript数组的使用
2013/03/28 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
谈谈python中GUI的选择
2018/03/01 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
房屋委托书范本
2014/04/04 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
《搭石》教学反思
2016/02/18 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL