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之更有效率的字符串替换
Aug 02 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 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
zf框架db类的分页示例分享
2014/03/14 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
tensorflow实现KNN识别MNIST
2018/03/12 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
numpy.array 操作使用简单总结
2019/11/08 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python中shell执行知识点
2020/05/06 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python怎么自定义捕获错误
2020/06/29 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
交通文明倡议书
2014/05/16 职场文书
社区创先争优承诺书
2014/08/30 职场文书
大学军训的体会
2014/11/08 职场文书
庆祝教师节主持词
2015/07/06 职场文书
移除Selenium中window.navigator.webdriver值
2022/06/10 Python