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实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
原生js实现无缝轮播图效果
Jan 28 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
自己的js工具 Event封装
2009/08/21 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
Python多线程编程简单介绍
2015/04/13 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python-接口开发入门解析
2019/08/01 Python
python进行参数传递的方法
2020/05/12 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
车间副主任岗位职责
2013/12/24 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书