Действительно ли removeChild удаляет элемент?

Question

Функция removeChild действительно полностью удаляет дочерний узел?Или он просто удаляет элемент, являющийся дочерним по отношению к указанному узлу parant?Если он действительно не удаляет элемент, есть ли способ полностью удалить элемент?

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 (или чего-либо еще) этой переменной - как предполагает Марк Б в своем ответе - совершенно ненужно и, ИМХО, глупо.

Answer 2

Это полностью удалит узел:

someNode.removeChild(...);

Это удалит узел из DOM, поэтому он не будет виден, но сохранит его, чтобы вы могли вставить его в другое место:

oldNode = someNode.removeChild(...);

Answer 3

Если вы хотите действительно удалить элемент dom. одного только removeChild недостаточно. Это в соответствии со Стивом Саундерсом, который является автором YSlow. Вам нужно использовать delete

Answer 4

removeChild удаляет элемент из dom, но он также возвращается из функции в случае, если вы делаете удаление, чтобы вставить его в другое место. Вам нужно убить это возвращаемое значение, чтобы действительно избавиться от удаленного узла:

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