ChildNode#

ChildNode.remove()#

Metoda remove() usuwa dany węzeł z jego rodzica.

Opis działania#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
childNode.remove();

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody remove() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Jeśli rodzicem w obiekcie kontekstu jest wartość null, to pomiń kolejne kroki.
  2. Usuń dany obiekt kontekstu z rodzica posiadanego przez obiekt kontekstu.

Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę remove(), nie musi mieć rodzica, i w takiej sytuacji nie wykonane zostaną żadne czynności (bez zgłoszenia jakiegokolwiek błędu).

Metoda remove(), w przeciwieństwie do metody Node.removeChild(), nie zwraca referencji do usuwanego węzła, ale nie jest to szczególnie istotne, gdyż samo jej wywołanie wymaga uprzedniego dostępu do usuwanego węzła.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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");

			// Manipulujemy drzewem po upływie 3 s
			setTimeout(function(){

				// Tylko Chrome
				ul1.firstElementChild.remove();
				ul2.firstElementChild.remove();

			}, 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">
		<li><a href="">Pierwszy odsyłacz</a></li>
	</ul>
</body>

</html>

Na chwilę obecną jedynie przeglądarki Firefox i Chrome zaimplementowały metodę remove().

Metoda remove() pojawia się dopiero w specyfikacji DOM4.

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
[NoInterfaceObject]
interface ChildNode {
	[Unscopable] void remove();
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

ChildNode (H1) ChildNode.remove() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)