jQuery - usuwanie elementów drzewa DOM

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3518 razy

Biblioteka jQuery udostępnia również metody umożliwiające usuwanie elementów drzewa DOM. Jedną z takich metod jest empty, która usuwa wszystkie elementy potomne wybranych selektorów. Oto prosty przykład:

$("#svg").empty();

Powyższy kod usuwa wszystkie elementy potomne elementu o identyfikatorze id = "svg". Możliwe jest również usuwanie danego elementu wraz z jego potomkami za pomocą metody remove:

$("#svg").remove();

Co ciekawe metoda remove pozwala na filtrowanie elementów usuwanych np. w taki sposób:

$( "div" ).remove(".data");

Powyższy kod usuwa wszystkie elementy div mające przypisaną klasę class = "data". Oczywiście (w tym przypadku) można by to zrobić również i tak:

$( "div.data" ).remove();

Kolejną ciekawą opcją jest metoda detach(), która tak jak metoda remove usuwa elementy z tą różnicą, że zwraca obiekt jQuery je zawierający, dzięki czemu można te elementy później załączyć dynamicznie w kodzie strony.

var example = $("p.example").detach(); // usuwanie i zapamiętanie w zmiennej example example.appendTo("div.exaple"); // podpięcie do div-a z przypisaną klasą example
Strony powiązane
strony powiązane
  1. api.jquery.com/empty/ - opis metody empty na stronie dokumentacji jQuery
  2. api.jquery.com/remove/ - opis metody remove na stronie dokumentacji jQuery
  3. api.jquery.com/detach/ - opis metody detach na stronie dokumentacji jQuery