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实现下载远程文件并保存在本地的脚本
May 06 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
ant design pro中可控的筛选和排序实例
Nov 17 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原理之执行周期分析
2016/06/01 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Python操作Mongodb数据库的方法小结
2019/09/10 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
网上商城创业计划书范文
2014/01/31 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
党员进社区活动总结
2015/05/07 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
python实现简单聊天功能
2021/07/07 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android