removeChild真的会删除元素吗？

Question

removeChild

函数真的能彻底删除子节点吗？或者它只是删除指定父节点的子元素？如果没有真正删除元素，有没有办法彻底删除元素？

Answer 1

removeChild

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

但是 Javascript 有垃圾收集功能。这意味着只要有任何变量引用它，节点对象本身就会一直存在。因此，您可以将节点分配给变量，使用

removeChild

将其从其父节点中“修剪”，然后将其插入或附加到其他节点，从而有效地在页面上移动它。

以下代码将删除一个节点，并等待 10 秒，然后将其重新添加到树中（从而添加到页面中）：

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

这意味着节点对象还没有从内存中删除，因为还有一个变量指向它（即

oldNode

）。

另一个案例：

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

另一方面，如果您不将删除的节点重新分配给另一个变量，则无法再访问它（不能通过文档树访问，因为它已从那里删除；并且不能通过 JS 变量访问） ;所以 Javascript 会自动从内存中清除它：

someNode.removeChild(...);

将删除的节点分配给一个变量，然后将

null

（或其他任何东西）分配给该变量 - 就像 Marc B 在他的答案中建议的那样 - 完全没有必要，而且，恕我直言，很愚蠢。

Answer 2

这将完全删除该节点：

someNode.removeChild(...);

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

oldNode = someNode.removeChild(...);

Answer 3

removeChild 从 dom 中删除元素，但它也会从函数中返回，以防您执行删除操作以将其重新插入到其他位置。您必须杀死该返回值才能真正摆脱已删除的节点：

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

Answer 4

如果你想真正删除一个dom元素。仅靠removeChild 是不够的。这是 YSlow 的作者 Steve Sounders 所说的。您需要使用删除

Answer 5

快速提示：使用现代 JavaScript，您可以使用remove() 方法简化删除 DOM 元素的过程。只需使用node.remove()，而不是node.parentElement.removeChild(node)。这是达到相同结果的更干净、更简洁的方法。