jQuery中提供了两种移出一个DOM元素的方法detach()和remove(),虽然是一样的功能，但是给出两种方法，必然有它的不同之处。

empty() 单独说一下 ，它删除当前元素的所有子元素，包括文本节点，并不会删除当前元素的事件和样式，删除之后不可恢复。

官方解释：

　　　　detach() 方法移除被选元素，包括所有文本和子节点。detach() 会保留所有绑定的事件、附加的数据

　　　　remove() 方法是移出元素，包括绑定的事件，附加数据

代码分析

　　当使用的是 detach方法时，重新添加元素之后点击事件依然有效

　　当使用的是remove方法时，重新添加元素之后点击事件不生效

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="js/jquery-1.7.2.min.js"></script>

     <script>

         $(document).ready(function(){

             var $div1 = $('.div1')

             // 绑定事件

             $('.div1').click(function(){

                 alert(1)

             })

             // 删除元素

             $('#detach').click(function(){

                 $div1.detach();

             })

             //重新添加

             $('#back').click(function(){

                 $('#box').append($div1)

             })

         })

     </script>

 </head>

 <body>

     <div id="box">

         <div class="div1">aaaaaa</div>

         <div class="div2"">bbbbbb</div>

     </div>

     <input type="button" value="detach" id="detach">

     <input type="button" value="back" id="back">

 </body>

 </html>

了解jQuery的detach()和remove()的更多相关文章

  1. jQuery之empty、remove、detach

    三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes ...

  2. 探索jquery方法中empty,remove与detach的区别

    最近一直疑惑此三种方法的具体区别在于何处,随即想弄明白其具体的区别,看了一些说明,也依照官方文档,终于把这三个方法弄明白了,果然功夫不负有心人,继续努力. 上正文,先简单介绍下这三种方法 .empty ...

  3. detach() 与remove（）

    detach() 与remove()区别,在于remove()掉后,就没有啦,添加的事件也没有啦,后者还有啊,可以保留的哦,虽然 $("div").click(function() ...

  4. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  5. ♫【jQuery】detach

    Jquery empty() remove() detach() 方法的区别 <!DOCTYPE html> <html> <head> <meta char ...

  6. jquery的.detach()方法

    .detach()就是从DOM中删除所有匹配的元素. 与.remove()方法不同的是, 这个方法不会把匹配的元素从jQuery对象中删除,所有绑定的事件.附加的数据等都会保留下来,因而可以在将来再使 ...

  7. detach与remove区别，以及detach保留被删除的元素数据，使用

    detach() 会保留所有绑定的事件.附加的数据,这一点与 remove() 不同. remove掉元素后,元素再也找不回了.但是detach还能找回来,还能保留下来. 实现方式如下代码: < ...

  8. jQuery 文档操作 - remove() 方法

    移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...

  9. jquery中empty()和remove()的区别

    empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内 ...

随机推荐

  1. REPLACE 语法

    转自:https://www.cnblogs.com/jiangzhengjun/p/4292994.html#_Toc411766043 REPLACE REPLACE [{FIRST OCCURR ...

  2. 4.1 python类的特殊成员,偏函数,线程安全,栈,flask上下文

    目录 一. Python 类的特殊成员(部分) 二. Python偏函数 1. 描述 2. 实例一: 取余函数 3. 实例二: 求三个数的和 三. 线程安全 1. 实例一: 无线程,消耗时间过长 2. ...

  3. Hadoop 部署之 Hadoop (三)

    目录 一.Hadoop 介绍 1.HDFS 介绍 2.HDFS 组成 3.MapReduce 介绍 4.MapReduce 架构 JobTracker TaskTracker 二.Hadoop的安装 ...

  4. Flutter 的url_launcher简介

    url_launcher是用于在移动平台中启动URL的Flutter插件,适用于IOS和Android平台.他可以打开网页,发送邮件,还可以拨打电话. github地址:https://github. ...

  5. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  6. Nginx负载均衡高可用---架构

    1. Nginx负载均衡高可用 首先介绍一下Keepalived,它是一个高性能的服务器高可用或热备解决方案,Keepalived主要来防止服务器单点故障的发生问题,可以通过其与Nginx的配合实现w ...

  7. solr的使用

    一,下载,安装 https://lucene.apache.org/solr/ 二, mac下使用 下载二进制包后,解压 step 1 进入solr目录: cd solr-8.2.0 step 2 进 ...

  8. 【Funny Things】001——QQ循环发送消息

    借用Java的Robot类库中的键鼠模拟的方法,执行这个操作,首先切换到QQ界面,然后循环粘贴,回车发送消息. package newtest; import java.awt.*; import j ...

  9. 剑指offer40：一个整型数组里除了两个数字之外，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字

    1 题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 2 思路和方法 (1)异或:除了有两个数字只出现了一次,其他数字都出现了两次.异或运算中,任 ...

  10. 基于docker的mongodb安装以及PHP使用

    说明:用docker基于单服务器,虚拟多个服务器的方案, 以下是两个config服务器,两个分片,以及每个分片有一个副本的方案 这里关于给mongodb设置远程密码的问题,我采取了用两个compser ...