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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 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
一个ftp类(ini.php)
2006/10/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JS重载实现方法分析
2016/12/16 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
python读取图片并修改格式与大小的方法
2018/07/24 Python
python3中eval函数用法使用简介
2019/08/02 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
函授毕业个人自我评价
2014/02/20 职场文书
政治表现评语
2014/05/04 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
志愿者宣传口号
2014/06/17 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang