jQuery - usuwanie elementów drzewa DOM

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

$("#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

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

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

Listing 3

$( "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

$( "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

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

api.jquery.com/empty/ - opis metody empty na stronie dokumentacji jQuery
api.jquery.com/remove/ - opis metody remove na stronie dokumentacji jQuery
api.jquery.com/detach/ - opis metody detach na stronie dokumentacji jQuery

Propozycje książek