jQuery中DOM节点的删除方法综述(超全面)

jQuery中DOM节点的删除方法综述(超全面)
前言

大家都知道,页面上的节点删除开发者的常见操作,而jQuery提供了几种不同的方法处理这个问题。

1。空
顾名思义,空的方法是空的,但它与删除有点不同,因为它只删除指定元素中的所有子元素。

这种方法不仅消除了子元素(和其他的后代),而且消除文本的元素。因为,根据指示,元素中的文本字符串作为的子元素。如果我们删除div元素从空的方法,只是清除内部的HTML代码,但标签仍然停留在DOM,并删除所有的p元素div元素通过电流下空,但ID =测试本身的DIV元素是不会被删除。
$(按钮),(听到咔哒声,函数(){)
空/删除/删除P元素下的所有当前div元素
但未删除div id =测试/元素本身
$(#测试)空()。
})
二、删除
像空一样删除是移除元素的方法,但是删除可以删除元素本身,也可以删除元素内部的所有内容,包括绑定的事件和与元素相关的jQuery数据。

例如,一个节点,在绑定点击事件,如果不通过Remove方法删除节点也很简单,但也需要事件来摧毁,这是为了防止内存泄漏使用Remove方法移除所有的div及其内部元素的元素,删除会自动操作事件的破坏方法,所以它是非常简单的使用

移除表达式参数

除去比空洞的地方通过选择器表达式将被用于过滤匹配的元素删除设置,可以选择性地删除指定的节点,我们可以通过$()选择一组相同的元素,然后通过删除(转移)的筛选规则,如:$(p)。滤波器(包含(3'))(去除)。

{。test1
背景:# bbffaa;
}

{。test2
背景:黄色;
}

通过jQuery移除方法移除元素

P元素1
P元素2
P元素3
P元素4

单击空通过jQuery删除元素
单击jQuery的空,以移除指定的元素。

$(按钮:第一),(听到咔哒声,函数(){)
删除整个班= / / div节点试验
$(。test1)删除()。
})

$(按钮:去年),(听到咔哒声,函数(){)
查找所有p元素,包含3个元素
这也是一个过滤器。
$(p),删除(:包含(3'))
})

空与删除的区别
用指定元素的去除,jQuery提供了两种方法去除空()({ },表达)和两个都删除元素,但他们仍然是不同的

空的方法

严格说来,空()方法不是删除节点,而是清空节点,清除元素的所有后代。
空不能删除这个节点

去除方法

此节点将同时与节点包含的所有后代节点一起删除。
提供一个筛选表达式来指定删除该集合中的元素。

三、分离
如果我们想删除网页上的临时节点,但也不想让数据和节点上的事件丢失,并且可以显示页面在下次让删除节点,那么你可以使用分离法处理分离从字面上很容易理解。让网页内容管理,元素是从当前页面删除,但该元素的内存模型对象保留。

官方解释:这种方法不是从jQuery对象中删除匹配的元素,所以这些元素可用于未来。不像(),删除所有绑定的事件,附加数据,等被保留。$(div)。分离()语句删除对象,只显示效果丢失。但它仍然存在于内存中。当你添加,你回到文档流。它再次显示。

当然,你应该特别注意这里。分离方法是jQuery独有的,因此它只能处理由jQuery方法绑定的事件或数据。

在删除所有p元素元素后,通过删除()将被删除的p放在页面上,通过单击文本测试不会丢失该事件。
p元素1,默认情况下绑定单击事件
p元素2,默认情况下绑定单击事件
单击以删除p元素
单击移动P元素

$('p')。Click(function(e){
警报(e.target .innerHTML)
})
var p;
$(# BT1)。Click(function(){)
如果(!$(p)。长度返回
以分离方法删除元素
页面是不可见的/只是,但节点也存储在内存中。
数据和事件不会丢失。
p = $()。
});

$(# BT2)。Click(function(){)
添加到页面中的元素
事件仍然存在
$();
});

分离()和删除()之间的区别
jQuery是图书馆开发工作中的一个非常强大的工具,但有些方法或由于不习惯,或者没有被我们注意和忽略,删除()和分离()可能是其中之一,也许删除()我们使用得更多,而分离()可能非常小。

对比表是用来解释这2种方法之间的差异。
方法名称
参数
是否删除事件和数据
元素是否被移除
删除
支持选择器表达式

在没有参数的情况下,参数范围涉及参数。
分离
参数和删除

情况和消除

移除:删除节点

没有参数,删除自己的整个节点和节点中的所有节点,包括节点上的事件和数据。
有一些参数可以删除选定的节点和节点中的所有节点,包括节点上的事件和数据。

分离:删除节点

去除处理与去除一致。
与删除()不同,所有绑定事件、附加数据等都将被保存
例如,$()()的句子将删除对象,只有显示效果消失了,但它仍然存在于内存中。
总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问,你可以留言。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部