jQuery中remove()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中remove()方法用法。分享给大家供大家参考。具体分析如下:

此方法将会从DOM中删除所有匹配的元素。

说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

语法结构:

$(selector).remove(expr)

参数列表:

参数 描述
expr 可选。用于筛选元素的jQuery表达式
实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>remove()函数-三水点靠木</title>

<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">

<meta name="author" content="https://3water.com/" />

<title>remove()函数-三水点靠木</title>

<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">

<meta name="author" content="https://3water.com/" />

<title>remove()函数-三水点靠木</title>

<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程序设计有所帮助。

Javascript 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JS之相等操作符详解
Sep 13 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 #Javascript
jQuery中before()方法用法实例
Dec 25 #Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 #Javascript
jQuery中after()方法用法实例
Dec 25 #Javascript
jQuery中prepend()方法用法实例
Dec 25 #Javascript
jQuery中append()方法用法实例
Dec 25 #Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python制作刷网页流量工具
2017/04/23 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
教研活动主持词
2015/07/03 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
56句经典英文座右铭
2019/08/09 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
java泛型通配符详解
2021/07/25 Java/Android
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android