jQuery - usuwanie elementów drzewa DOM

Stronę tą wyświetlono już: 927 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:

Listing 1
  1. $("#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:

Listing 2
  1. $("#svg").remove();

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

Listing 3
  1. $( "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:

Listing 4
  1. $( "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.

Listing 5
  1. var example = $("p.example").detach(); // usuwanie i zapamiętanie w zmiennej example
  2. 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

Komentarze