javascript removeChild 真的删除元素吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5194924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 16:19:52  来源:igfitidea点击:

Does removeChild really delete the element?

javascripthtmldomremovechild

提问by Yunus Eren Güzel

Does removeChildfunction really delete the child node completely? Or it just removes the element being child of the specified parant node? If it doesn't really deletes the element, is there a way to delete the element completely?

是否removeChild函数真的完全删除的子节点?或者它只是删除作为指定父节点的子元素的元素?如果它没有真正删除元素,有没有办法完全删除元素?

回答by Martijn

The removeChildmethod simply removes it from its parent. If it's a visible element of the page, it will be removed from the page.

removeChild方法只是将其从其父项中删除。如果它是页面的可见元素,它将从页面中删除。

But Javascript has garbage collection. This means that the node object itself will remain in existence as long as any variable refers to it. So you can assign a node to a variable, use removeChildto 'prune' it from its parent node, and later on, insert or append it to some other node, thereby effectively moving it around on the page.

但是 Javascript 有垃圾收集功能。这意味着只要有任何变量引用它,节点对象本身就会一直存在。因此,您可以将一个节点分配给一个变量,用于removeChild从其父节点“修剪”它,然后将其插入或附加到某个其他节点,从而有效地在页面上移动它。

The following code will remove a node, and wait 10 seconds before re-adding it to the tree (and thus, to the page):

以下代码将删除一个节点,并等待 10 秒,然后再将其重新添加到树中(因此,添加到页面中):

var oldNode = someNode.removeChild(...);
setTimeout(function () {
  document.documentElement.appendChild(oldNode);
}, 10000);

This means that the node object hasn't been deleted from memory, because there's still a variable pointing to it (namely, oldNode).

这意味着节点对象尚未从内存中删除,因为仍有一个变量指向它(即oldNode)。

Another case:

另一个案例:

var node = document.getElementById('test');
// ... do stuff
node.parentElement.removeChild(node);
// 'node' still exists, but has been removed from the page
// ... do some more stuff
node = document.getElementById('hello');
// The variable 'node' now points to something else; 
//  this means the original node will be deleted from memory

If, on the other hand, you don'treassign the removed node to another variable, it can't be accessed anymore (not via the document tree, since it's been removed from there; and not via a JS variable); so Javascript will automatically purge it from memory:

另一方面,如果您将删除的节点重新分配给另一个变量,则无法再访问它(不是通过文档树,因为它已从那里删除;而不是通过 JS 变量);所以Javascript会自动从内存中清除它:

someNode.removeChild(...);

Assigning the removed node to a variable, and then assigning null(or anything else) to that variable — like Marc B suggests in his answer — is completely unnecessary and, IMHO, silly.

将删除的节点分配给一个变量,然后将null(或其他任何东西)分配给该变量——就像 Marc B 在他的回答中所暗示的那样——是完全没有必要的,恕我直言,很愚蠢。

回答by awm

This will completely delete the node:

这将完全删除节点:

someNode.removeChild(...);

This will remove the node from the DOM so it's not visible but will save it so that you can insert it elsewhere:

这将从 DOM 中删除节点,使其不可见,但会保存它,以便您可以将其插入其他地方:

oldNode = someNode.removeChild(...);

回答by Marc B

removeChild removes the element from the dom, but it's also returned from the function in case you're doing the removal to re-insert it elsewhere. You'd have to kill that return value to really get rid of the removed node:

removeChild 从 dom 中删除元素,但它也会从函数中返回,以防您进行删除以将其重新插入其他地方。您必须杀死该返回值才能真正摆脱已删除的节点:

oldNode = someNode.removeChild(...);
oldNode = null;

回答by Arun George

If you want to really delete a dom element . removeChild alone is not enough. This is as per Steve Sounders who is the author of YSlow. You need to use delete

如果你想真正删除一个dom元素。单独的 removeChild 是不够的。这是根据 YSlow 的作者史蒂夫·桑德斯的说法。您需要使用删除