jQuery的remove()方法使用详解


Posted in Javascript onAugust 11, 2015

remove()方法的定义和用法:

此方法将会从DOM中删除所有匹配的元素。

说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

语法结构:

$(selector).remove(expr)

参数列表:

参数 描述
expr 可选。用于筛选元素的jQuery表达式

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<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">
<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使用remove()方法删除指定class子元素的方法

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("p").remove(".italic");
 });
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>Remove all p elements with class="italic"</button>
</body>
</html>

看到这段代码之后,我想不用我过多的解释了。大家就明白了吧,很有意思的方法。

Javascript 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
详解原生js实现offset方法
Jun 15 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
php文件操作实例代码
2012/05/10 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
20招让你的Python飞起来!
2016/09/27 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python绘制地震散点图
2019/06/18 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
财务管理专业推荐信
2013/11/19 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
调研座谈会发言材料
2014/08/23 职场文书
授权收款委托书范本
2014/10/10 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python