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 调试利器 Firebug使用详解六
Jul 05 Javascript
Javascript的闭包
Dec 31 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
Web开发之JavaScript
Mar 29 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
Vue的props父传子的示例代码
May 20 Javascript
微信小程序实现简单的select下拉框
Nov 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结合表单实现一些简单功能的例子
2011/06/04 PHP
php实现网站留言板功能
2015/11/04 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
JavaScript错误处理
2015/02/03 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python time模块用法实例详解
2014/09/11 Python
Python中的闭包总结
2014/09/18 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python定义一个Actor任务
2020/07/29 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
美术毕业生求职信
2014/02/25 职场文书
烹饪自我鉴定
2014/03/01 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
学习张林森心得体会
2014/09/10 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers