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 相关文章推荐
js中top的作用深入剖析
Mar 04 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
js中跨域方法原理详解
Jul 19 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
web 页面分页打印的实现
2009/06/22 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
vue二级路由设置方法
2018/02/09 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
用Python的urllib库提交WEB表单
2009/02/24 Python
详细介绍Python语言中的按位运算符
2013/11/26 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python交互式图形编程实例(一)
2017/11/17 Python
python实现聚类算法原理
2018/02/12 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
优秀团支部事迹材料
2014/02/08 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
庐山导游词
2015/02/03 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书