说到删除节点,马上就会想到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); }
}

jquery中remove()与detach()的区别的更多相关文章

  1. jquery 中remove()与detach()的区别

    remove()与detach()方法都是从dom中删除所有的元素 两者的共同之处在于都不会把匹配的元素从jQuery对象中删除. 不同之处在于用remove()删除的元素,除了元素被保留,其他的在这 ...

  2. jQuery的remove和detach的区别

    1.remove([expr])   概述:从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的 ...

  3. JavaScript 中 empty、remove 和 detach的区别

    内容 empty.remove 和 detach的区别 jQuery 操作 DOM 之删除节点 方法名 元素所绑定的事件及数据是否也被移除 作用 $(selector).empty() 是 从被选元素 ...

  4. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  5. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  6. JQuery中的html(),text(),val()区别

    jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...

  7. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  8. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  9. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

随机推荐

  1. linux的rpm教程

    1.rmp查询 1.1 软件包详细信息 rpm -qpi  httpd-2.4.25-9.fc27.x86_64.rpm 系统将会列出这个软件包的详细资料,包括含有多少个文件.各文件名称.文件大小.创 ...

  2. django自带的django.core.mail模块实现发邮件的功能

    django自带了一个模块,可以实现发邮件的功能.如果项目开发遇到需要发邮件进行验证的时候可以用到. 1.先要准备发件人 发邮件需要使用SMTP.SMTP是什么呢? 简单邮件传输协议(Simple M ...

  3. 切面保存web访问记录

    package com.hn.xf.device.api.rest.aspect; import com.hn.xf.device.api.rest.authorization.manager.Tok ...

  4. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. java静态类与非静态类区别

    java静态与非静态区别   这里的静态,指以static关键字修饰的,包括类,方法,块,字段. 非静态,指没有用static 修饰的. 静态有一些特点: 1.全局唯一,任何一次的修改都是全局性的影响 ...

  6. The 18th Zhejiang University Programming Contest Sponsored by TuSimple -C Mergeable Stack

    题目链接 题意: 题意简单,就是一个简单的数据结构,对栈的模拟操作,可用链表实现,也可以用C++的模板类来实现,但是要注意不能用cin cout,卡时间!!! 代码: #include <std ...

  7. bootstrap插件学习-bootstrap.tab.js(读码)

    先看bootstrap-tab.js的结构 var Tab = function ( element ) {} //构造器 Tab.prototype ={} //构造器的原型 $.fn.tab = ...

  8. vmware漏洞之二——简评:实战VMware虚拟机逃逸漏洞

    下文取自360,是vmware exploit作者自己撰写的.本文从实验角度对作者的文章进行解释,有助于学习和理解.文章虚线内或红色括号内为本人撰写. ------------------------ ...

  9. Java数组(int为例)

    Java数组(int为例) 定义:相同数据类型的数据的组合,是一种引用类型,是一个对象,存在堆里. 数组初始化:int[] scores1 = new int[]{72,90,59};//静态初始化: ...

  10. js中__proto__和prototype的区别和关系

          首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性_ ...