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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
jQuery的文档处理程序详解
May 10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
小程序实现密码输入框
Nov 16 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 var关键字相关原理及使用实例解析
2020/07/11 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
微信小程序日历效果
2018/12/29 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
Python中的迭代器漫谈
2015/02/03 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
土地转让协议书
2014/04/15 职场文书
读书之星事迹材料
2014/05/12 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
运动会报道稿300字
2014/10/02 职场文书
购房个人委托书范本
2014/10/11 职场文书
会议主持词开场白
2015/05/28 职场文书
五一晚会主持词
2015/07/01 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL