脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery的remove()方法使用详解

jQuery的remove()方法使用详解

 更新时间：2015年08月11日 08:56:22   投稿：hebedich  
从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。我的理解就是将元素移除了。

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>

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

您可能感兴趣的文章:

相关文章

  • 基于Jquery实现表格动态分页实现代码

    基于Jquery实现表格动态分页实现代码

    项目中经常会对表格进行分页，以下运用jquery对用户管理中的用户表格进行分页。
    2011-06-06
  • jquery实现的缩略图预览滑块实例

    jquery实现的缩略图预览滑块实例

    这篇文章主要介绍了jquery实现的缩略图预览滑块,实例分析了jQuery缩略图预览滑块的实现与使用技巧,并提供了完整的实例下载,需要的朋友可以参考下
    2015-06-06
  • jQuery实现拼图小游戏(实例讲解)

    jQuery实现拼图小游戏(实例讲解)

    下面小编就为大家带来一篇jQuery实现拼图小游戏(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】

    jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件Echarts实现的双轴图效果,结合完整实例形式分析了Echarts插件制作双轴图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jQuery实现贪吃蛇小游戏（附源码下载）

    jQuery实现贪吃蛇小游戏（附源码下载）

    网上关于JS实现贪吃蛇的文章有很多，最近闲来无事，想着利用jQury来实现贪吃蛇小游戏，下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法，文中给出的是吸纳思路和示例代码，需要的朋友可以参考下。
    2017-03-03
  • jQuery实现ToolTip元素定位显示功能示例

    jQuery实现ToolTip元素定位显示功能示例

    这篇文章主要介绍了jQuery实现ToolTip元素定位显示功能,结合实例形式分析了jQuery针对页面元素属性的动态操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • jQuery实现的模拟弹出窗口功能示例

    jQuery实现的模拟弹出窗口功能示例

    这篇文章主要介绍了jQuery实现的模拟弹出窗口功能,结合实例形式分析了jQuery弹出窗口的初始化、坐标、背景设置等相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • 基于JQuery实现图片轮播效果(焦点图)

    基于JQuery实现图片轮播效果(焦点图)

    这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果，利用Jquery制作焦点图左右轮播特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 简述jQuery ajax的执行顺序

    简述jQuery ajax的执行顺序

    jquery ajax的执行顺序大家在项目经常会颠倒，下面通过本文给大家介绍jquery ajax的执行顺序，涉及到jquery ajax执行顺序相关知识，对jquery ajax执行顺序相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 无需 Flash 使用 jQuery 复制文字到剪贴板

    无需 Flash 使用 jQuery 复制文字到剪贴板

    需要做的只是引入其脚本，在HTML标签上赋一个“data-clipboard-target”属性然后写一小段JavaScript片段。为了演示假定有一个货币转换应用，在一个文本框中输入数值时同时将兑换结果显示在另一个文本框中，当点击文本框时，会触发事件将其复制到剪贴板然后显示一条消息。
    2016-04-04

最新评论