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 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
vue-router的两种模式的区别
May 30 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
详解JavaScript的计时器和按钮效果设置
Feb 18 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
浅析Python 责任链设计模式
2020/09/11 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
文明礼仪倡议书
2015/04/28 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers