jquery detach()和remove()的区别

偏执的太偏执、 2024-02-17 22:56 4阅读 0赞

**remove：移除节点**

\- 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据

\- 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

**detach：移除节点**

\- 移除的处理与remove一致

\- 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(e) {
    
      //给p元素绑定事件
      $('p').click(function (e) {
        alert($(this).html());
      })
     
     //单击按钮1
      $("#b1").click(function () {
        var p = $("p:first").remove();
        p.css('color', 'red').html('p1通过remove处理后,点击该元素,事件丢失')
        $("body").append(p);
      });
      //单击按钮2
      $("#b2").click(function () {
        var p = $("p:last").detach();
        p.css('color', 'blue').text('p2通过detach处理后,点击该元素事件存在')
        $("body").append(p);
      });
      
          
    });
    </script>
    
    <body>
    
    <p>p1，同时绑定点击事件</p>
     
    <p>p2，同时绑定点击事件</p>
     
    <h2>remove与detache区别</h2>
    <input type="button" id="b1" value="remove处理p1">
    <input type="button" id="b2" value="detach处理p2">
    </body>

效果图：

![Center][]  
![Center 1][]

![Center 2][]

![Center 3][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5e57d8ba7db1416cbd5b15b1474edb49.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5f55784a5e25440bb313ac35efd26615.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/647fc14dda6e44fb8936e19121848c5f.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/14a23705c0f9429fabea48dacea35a30.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 remove hide 和empty的区别

*empty()清空标签内的内容** **<p>absd</p>** $("p").empty();//最后显示的是空的p标签。<p></p> 而**remove(...

迈不过友情╰/ 2024年04月17日 06:24/ 0 赞/ 48 阅读

相关 jquery detach()和remove()的区别

remove：移除节点 \- 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据 \- 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上

偏执的太偏执、/ 2024年02月17日 22:56/ 0 赞/ 5 阅读

相关 rabbit start 启动和 detached 启动区别

使用 `rabbitmq-server -start` 命令启动 RabbitMQ 时，RabbitMQ 服务器将在前台运行，并将日志输出到终端。在这种模式下，如果终端关闭，R

我不是女神ヾ/ 2023年10月16日 12:05/ 0 赞/ 28 阅读

相关 JavaScript 中 empty、remove 和 detach的区别

内容 empty、remove 和 detach的区别 jQuery 操作 DOM 之删除节点 <table> <thead> <tr>

小灰灰/ 2022年10月16日 10:00/ 0 赞/ 146 阅读

相关浅谈jQuery中的删除方法empty()、remove()和detach()

jQuery提供了三种删除节点的方法：remove()、detach()和empty()。 1．empty()：不是删除节点，而是清空节点，清空匹配的元素集合中所有的子节点，

╰+攻爆jí腚メ/ 2022年06月17日 11:45/ 0 赞/ 265 阅读

相关 jQuery中的detach()方法解析

在jQuery中，存在着三个删除元素的方法 1.empty() 2.remove(\[selector\]) 3.detach(\[selector\]) 对于前两种方

小鱼儿/ 2022年06月13日 01:25/ 0 赞/ 157 阅读

相关 jquery中删除元素detach()和remove() 不同之处

定义和用法 detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。 det

ゝ一世哀愁。/ 2022年06月01日 03:06/ 0 赞/ 156 阅读

相关 Collection接口的remove()方法和Iterator接口的remove()方法的区别.

这是一道标准的Java数据结构面试题，重点是回答区别。 Collection接口的remove()方法本质上就是各个底层自己实现的remove()方法，其优点就是当其不是遍历

落日映苍穹つ/ 2022年02月26日 05:58/ 0 赞/ 292 阅读

相关 jQuery--删除节点（remove()、detach()、empty()）详解

删除节点在jQuery中提供了remove()和detach()方法，用于删除元素节点；empty()方法用于清空当前元素中的内容，而元素的标签部分仍被保留。 1.

曾经终败给现在/ 2021年08月13日 13:38/ 0 赞/ 595 阅读

相关 jquery之empty()与remove()区别

删除元素/内容如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元

川长思鸟来/ 2021年06月24日 13:58/ 0 赞/ 371 阅读