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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue router 配置路由的方法
Jul 26 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 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(1)
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
模仿OSO的论坛(四)
2006/10/09 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php从字符串创建函数的方法
2015/03/16 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
js实现上传并压缩图片效果
2018/01/10 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Python类型转换的魔术方法详解
2020/12/23 Python
我的求职计划书
2014/01/10 职场文书
双拥工作宣传标语
2014/06/26 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
就业导师推荐信范文
2015/03/27 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题