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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue中input的v-model清空操作
Sep 06 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的FTP学习(四)
2006/10/09 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
js arguments对象应用介绍
2012/11/28 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
Python对列表中的各项进行关联详解
2017/08/15 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python 字符串池化的前提
2020/07/03 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
军训心得体会
2013/12/31 职场文书
高三地理教学反思
2014/01/11 职场文书
新年晚会主持词开场白
2015/05/28 职场文书