• jquery中remove()与detach()的区别


    说到删除节点,马上就会想到remove,不过原来还有一个detach,而且它们还是有区别的,就是detach保留了jquery的数据,而remove就会完全删除干净。所以如果在删除一个dom节点后还想保留它的数据以供使用就要用detach了。

     

    jquery是一个很大强的东西,在工作中常能用到,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略。

    remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了。可能我用的不够精吧,我是一次也没有用过。可是这次因为一个项目中一个问题,而用到它,感觉很有意思就记录下来,与大家分享。

    remove():官方的解释是

    从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

    我的理解就是将元素移除了。但是怎么再找回来,说真的,我一直也没有找到,哪个朋友用过。可以告诉我,十分感谢,

    用法:

    从DOM中把所有段落删除

    HTML 代码:
      <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
      $("p").remove();
    结果:
      how are

    这个方法,不多说了,我们主要说一下detach()这个方法,

    官方描述:

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

    描述:

    从DOM中把所有段落删除

    HTML 代码:
     <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
      $("p").detach();
    结果:
      how are
    描述:

    从DOM中把带有hello类的段落删除

    HTML 代码:
      <p class="hello">Hello</p> how are <p>you?</p>
    jQuery 代码:
      $("p").detach(".hello");
    结果:
      how are <p>you?</p>

    我们这么一看,好像没有什么区别啊。这二个功能,哈哈。。。。我现在说一下我遇到的情况。然后是如何解决的,大家就明白了。

    我这里有一个表单,其中有一项是 注册码,就是每个信息都会有一个独立的注册码,没有注册码是不能注册成功的。我用的是jquery的控件formValidator来进行验证的,这个控件大家都用过,他是在页面加载的时候,就开始验证了,而且对于css中的display和jquery里的hide()方法,它是无视的。本来呢。这是没有问题,可是用户却提出了一个新的需求,就是加一个选项,用来判断是否显示这个注册码,如果不显示,那么就不要对注册码文本框进行验证,无耻的需求。

    在试用了css的display和jquery的hide()之后,我把目光放到了remove()中。它到是不验证了,可是我选择要验证的时候,被移除的内容加不回来了,所以我开始找能回来了的。这时候,发现了detach()。它的有什么好处呢。我下面放一代码出来

    var p;
            function selectChange() {
                
    
                if (document.getElementById("ddl_schoolarea").value != "请选择") {
    
                    p = $("#trlession").detach();
                }
                else {
                    //table1为一个table名字
                    $("#table1").append(p);
                    
                }
            }
  • 相关阅读:
    python Flask基础使用
    安装docker以及常规操作
    关于InfiniBand几个基本知识点解释
    RDMA技术解析
    C++学习之 类
    C++学习 内存模型和名称空间
    C++基础知识(3)
    C++基础知识(2)
    C++基础知识(1)
    Java基础知识
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/3178722.html
Copyright © 2020-2023  润新知