jQuery 中 remove() 与 detach() 的区别

最新推荐文章于 2024-08-27 15:59:21 发布
最新推荐文章于 2024-08-27 15:59:21 发布
阅读量147 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5abd8fa26fb9a028d20807c1
版权

jQuery中有两种方法功能类似：删除dom元素（剪切下来）。这两种方法分别是remove()和detach()。

我们来写一个小demo用一下这两种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            width: 100px;
            height: 200px;
            border: 1px solid #ccc;
        }        
        
        div {
            width: 100px;
            height: 100px;
        }

        .item1 {
            background: blueviolet
        }

        .item2 {
            background: cadetblue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>

        $('.item1').click(function () {
            $(this).remove();
        })
        $('.item2').click(function () {
            $(this).detach();
        })

    </script>

</body>
</html>
复制代码

实现的效果是：点击哪个方块，哪个方块删除。只不过点击item1使用remove()方法删除元素，点击item2使用detach()方法删除元素。 初始状态如下：

先点击item1，也就是紫色方块，发现紫色方块消失了。
再点击item2，也就是绿色方块，发现绿色方块也消失了。

到目前为止，这两种方法没什么区别。

我们继续，增加一个按钮，作用是点击之后，重新插入被删除的这两个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            width: 100px;
            height: 200px;
            border: 1px solid #ccc;
        }        
        
        div {
            width: 100px;
            height: 100px;
        }

        .item1 {
            background: blueviolet
        }

        .item2 {
            background: cadetblue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
    <button>插入div</button>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>

        $('.item1').click(function () {
            item1 = $(this).remove();
        })
        $('.item2').click(function () {
            item2 = $(this).detach();
        })
        $('button').click(function () {
            $('.wrapper').append(item1).append(item2);
        })

    </script>

</body>
</html>
复制代码

首先依次点击item1和item2这两个方块，删除这两个元素

点击按钮，发现被删除的两个元素重新被插入进来

再次点击两个item，发现item2能被删除，而item1删除不掉了。

也就是说，用detach()方法删除的元素，插入回来之后，可以再次通过点击事件进行删除；而用remove()删除的元素，插入回来之后，点击事件失效了。

这就是这两种方法的区别：

  • remove()方法不仅可以删除dom元素，连同该元素绑定的事件也一并删除。
  • detach()方法删除dom元素，不会影响该元素绑定的事件。

谢谢浏览，期待你的反馈！

weixin_33985507
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中remove()和detach()的区别
weixin_44309299的博客
05-17 694
jquery中detach()和remove()区别 1、定义区别 remove()方法: 把被选中元素删除（包括事件）； detach()方法: 把被选中元素删除，当把元素在添加到body中时，原先的事件还会保留。 2、使用区别 remove()方法：删除元素之后除了元素自身保留下来外，其他的比如绑定的事件，附加的数据等都会被删除。 detach()方法：删除元素可以在将来再使用，且所有绑定的事件、附加的数据等都会保留下来 案例 <!DOCTYPE html> <.
jquery中remove与detach的区别
m0_37820751的博客
10-11 336
两者的定义 detach detach() 方法移除被选元素，包括所有文本和子节点。 这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。 detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。 remove remove() 方法移除被选元素，包括所有的文本和子节点。 该方法也会移除被选元素的数据和事件。 举个例子...
jquery中remove()与detach()的区别
weixin_34062329的博客
07-08 52
说到删除节点，马上就会想到remove，不过原来还有一个detach，而且它们还是有区别的，就是detach保留了jquery的数据，而remove就会完全删除干净。所以如果在删除一个dom节点后还想保留它的数据以供使用就要用detach了。   jquery是一个很大强的东西，在工作中常能用到，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。 remove()和detach()...
jQuery中remove方法和detach方法的区别
XUYIGE的博客
03-05 377
remove() 和 detach()都是删除元素的方法 那他们的区别是？？ remove方法： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d...
jquery的remove和detach的方法区别
Focus-Fe
10-15 185
前面写过一篇jQuery文档处理相关的文章，介绍了一下文档操作中删除相关的api。   那么remove与detach的区别最主要的是什么呢？   我们先做个测试，动动手比死的理论影响深刻。       &lt;div id="test" style="width:200px;height:100px;"&gt;默认文字&lt;/div&gt; &lt;input type=...
详解jQuery中的empty、remove和detach
10-22
然而，remove与empty的主要区别在于，remove方法在移除元素时，会同时清除元素上的数据和事件处理器，这使得元素无法再被重新添加回DOM中而不丢失其数据和事件绑定。 最后，detach方法提供了与remove类似的功能，...
老生常谈jquery中detach()和remove()的区别
12-09
在jQuery中，`detach()` 和 `remove()` 是两个用于移除DOM元素的方法，但它们在处理元素时有着显著的不同。了解这些差异对于优化代码和管理DOM树的状态至关重要。 `remove()` 方法是jQuery中最常见的用于移除元素的...
jQuery删除节点的三个方法即remove()detach()和empty()
12-01
在jQuery库中，有三种主要的方法用于处理DOM节点的删除：`remove()`，`detach()`，以及`empty()`。每种方法都有其特定的用途，适用于不同的场景。 1. `remove()`方法 `remove()`是jQuery中最常用的删除节点的方法。...
jQuery学习之remove与detach区别
行成于思毁于随
01-29 325
jQuery学习之remove与detach区别 1、remove([expr]) 概述：从DOM中删除所有匹配的元素。 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附 加的数据等都会被移除。 第一项     Item1     Item2    
jQuery方法中detach()和remove()的区别
weixin_44260504的博客
03-08 888
jQuery方法中detach()和remove()的区别 detach()方法是jQuery1.4版本中添加的，作用是删除掉所有匹配的元素，作用和remove()很像，但是它们还是有些不同之处。 remove()的作用是移除元素及其子元素，所有的绑定事件，附加元素也会被删除。 detach()的作用和remove()很像，不同的是它会保留绑定事件和附加元素。 &lt;body id='body'...
jquery中detach()和remove()区别
sina_panda
04-23 888
JQuery是一个很大强的工具库，在工作中开发中，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。     remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了      通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移
jQuery中 detach() 和 remove() 方法的区别是什么
NaiSiWangZai的博客
09-11 1045
尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法。 ...
JavaScript代码片段
weixin_66128399的博客
08-26 347
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 715
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
jQuery基础——DOM
m0_54066656的博客
08-27 1249
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4413
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1557
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
uni-app的示例项目--简单的登陆页面及列表页面
bingbingyihao的博客
08-24 856
uni-app的示例项目--简单的登陆页面及列表页面
简述jquery中可以用来删除元素的remove()方法和detach()方法的异同
04-24
2. remove() 方法会从文档流中完全删除元素及其子元素，而 detach() 方法则只是将元素从文档流中分离出来，但不会删除其子元素。 3. remove() 方法执行后，被删除的元素会被彻底消失，在新的位置重新插入该元素将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值