Node#
Node.removeChild()#
Metoda removeChild() usuwa przekazane dziecko z danego węzła i zwraca referencję do usuniętego dziecka.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var child = node.removeChild(child);gdzie poszczególne człony oznaczają:
- child - referencja do usuwanego dziecka.
- node - węzeł będący obiektem kontekstu, który musi być rodzicem dla przekazanego dziecka.
- child - referencja do usuwanego węzła.
Algorytm wywołania metody removeChild(child) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik przed usunięcia child z obiektu kontekstu.
Do wywołania metody removeChild() w powyższym zapisie składniowym potrzeba dwóch odwołań: do rodzica oraz do usuwanego dziecka. Składnię można nieco uprościć ograniczając się wyłącznie do usuwanego dziecka:
var child = child.parentNode.removeChild(child);
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę removeChild(), koniecznie musi być rodzicem dla przekazanego węzła,a ale nie może być jego dalszym przodkiem, w przeciwieństwie do metody Node.appendChild(), która pozbawiona jest takich ograniczeń.
Trzeba uważać przy usuwaniu wielu węzłów za pomocą metody removeChild(). Z racji tego, że usunięte węzły wciąż pozostają w pamięci komputera, to w niektórych przypadkach mogą znacząco wpłynąć na wielkość zużywanej pamięci. Jeśli usuwane węzły nie będą ponownie wykorzystywane to należałoby je samodzielnie zneutralizować, np. poprzez dereferencję lub bezpośrednie usunięcie obiektu z pamięci za pomocą operatora delete.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
var removeNode = ul1.getElementsByTagName("li")[0]; // referencja do usuwanego dziecka
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
var ref = ul1.removeChild(removeNode); // referencja do usuwanego węzła po jego usunięciu, to samo co removeNode
var nextNode = document.createElement("li"); // nowy węzeł
nextNode.textContent = ref; // wartością tekstową uzyskaną po automatycznej konwersji ref będzie [object HTMLLIElement]
ul2.appendChild(nextNode); // dołączenie nowego węzła
ul2.appendChild(ref); // dołączenie usuniętego węzła
}, 3000);
}
</script>
</head>
<body>
<p>Lista 1</p>
<ul id="ul1">
<li><a href="">Pierwszy odsyłacz</a></li>
<li><a href="">Drugi odsyłacz</a></li>
</ul>
<p>Lista 2</p>
<ul id="ul2">
</ul>
</body>
</html>Składnia Web IDL#
interface Node : EventTarget { Node removeChild(Node child); }