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代码
Jan 28 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
angular中的cookie读写方法
Aug 02 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
Element Badge标记的使用方法
Jul 27 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获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
JS 继承实例分析
2008/11/04 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python实现的计算器功能示例
2018/04/26 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
python的launcher用法知识点总结
2020/08/07 Python
python代码实现猜拳小游戏
2020/11/30 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
2014年机关后勤工作总结
2014/12/16 职场文书
教师个人年终总结
2015/02/11 职场文书
公司岗位说明书
2015/10/08 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers