Usuń wszystkie elementy z określoną klasą za pomocą JavaScript

Podczas aktualizacji strony internetowej lub witryny istnieją pewne elementy powiązane z funkcjami, które należy natychmiast usunąć. Na przykład pominięcie konkretnej funkcji (posiadania wielu efektów) ze strony internetowej na przycisku kliknij. W takich sytuacjach usunięcie wszystkich elementów z określoną klasą za pomocą JavaScript jest bardzo przydatną funkcją w tworzeniu witryny przyjaznej dla użytkownika i oszczędzaniu czasu.

Ten blog ilustruje podejścia do usunięcia wszystkich elementów za pomocą określonych klas za pomocą JavaScript.

Jak usunąć wszystkie elementy z określoną klasą za pomocą JavaScript?

Aby usunąć wszystkie elementy z określoną klasą za pomocą JavaScript, wdrożyć następujące podejścia w połączeniu z „dla każdego()" I "usunąć()”Metody:

• "QuerySelelection ()" metoda.
• "Szyk.z()" I "getElementsByClassName ()”Metody.

Zilustrujmy podane metody jeden po drugim!

Podejście 1: Usuń wszystkie elementy z określoną klasą w JavaScript przy użyciu metody QuerySelelectorAll ()

„„dla każdego()”Metoda stosuje funkcję dla każdego elementu zawartego w tablicy. „„usunąć()„Metoda pomija element z dokumentu. Natomiast "QuerySelelection ()”Metoda pobiera wszystkie elementy pasujące do selektora CSS i podaje w zamian listę węzłów. Metody te można zastosować w połączeniu w celu pobrania różnych elementów z identycznymi klasami, iterować każdy element i usunąć je po kliknięciu przycisku.

Składnia

szyk.foreach (funkcja (bieżące, indeks, tablica), to)

W powyższej składni:

• funkcjonować: Jest to funkcja, która ma być wykonywana dla każdego elementu w tablicy.
• aktualny: Ten parametr oznacza bieżącą wartość tablicy.
• indeks: Wskazuje na indeks bieżącego elementu.
• szyk: Odnosi się do bieżącej tablicy.
• Ten: Odpowiada wartości przekazywanej do funkcji.

dokument.querySelelectionAll (selektory)

W podanej składni:

• "Selektory”Odpowiada jednego lub więcej niż jednego selektora CSS.

Przykład
Przejdźmy do następującego przykładu:

To jest obraz

Kliknij, aby usunąć elementy

Zastosuj następujące kroki w powyższym fragmencie kodu:

• W kodzie HTML „

  " I "”Odpowiednio elementy mają te same klasy.

• Utwórz także przycisk o „na kliknięcie„Zdarzenie wywołujące funkcję resureElements ().
• Teraz, w kodzie JS, zadeklaruj funkcję o nazwie „Usuń ()".
• W swojej definicji zastosuj „QuerySelelection ()”Metoda i wskazują na określoną klasę w stosunku do elementów, jak stwierdzono w pierwszym kroku.
• Potem przywołaj „dla każdego()„Metoda dostępu do każdego elementu za pomocą iteracji.
• Na koniec zastosuj „usunąć()”Metoda usunięcia iterowanych elementów w poprzednim kroku w stosunku do pobieranej klasy.
• Spowoduje to usunięcie wszystkich elementów posiadających konkretną klasę po kliknięciu przycisku.

Wyjście

W powyższym wyjściu można zauważyć, że widoczne elementy w modelu obiektu dokumentu są usuwane po kliknięciu przycisku.

Podejście 2: Usuń wszystkie elementy z określoną klasą w JavaScript za pomocą tablicy.z () i getElementsByClassName ()

„„Szyk.z()”Metoda zwraca tablicę z obiektu o długości tablicy jako jego parametru. „„getElementsByClassName ()”Metoda podaje kolekcję elementu z określoną nazwą klasy (y). Metody te można połączyć, aby uzyskać dostęp do elementów według klasy oraz zwrócić je i usunąć, iteracyjnym przez nie.

Składnia

Szyk.z (obiekt, mapa, wartość)

W powyższej składni:

• "obiekt”Odnosi się do obiektu, który ma zostać przekonwertowany na tablicę.
• "mapa”Odpowiada funkcji mapy, którą należy zmapować na każdym elemencie.
• "wartość”Wskazuje na wartość, którą należy wykorzystać jako„Ten”Dla funkcji mapy.

dokument.getElementsByClassName (klasa)

W podanej składni:

• "klasa”Reprezentuje nazwę klasy elementu.

Przykład
Przejdźmy do następującego przykładu:

Usuń elementy

Kliknij, aby usunąć elementy

W powyższych wierszach kodu:

• Podobnie, uwzględnij „

  ”I„ „„Elementy mające te same klasy.

• Podobnie utwórz przycisk z „na kliknięcie„Przekierowanie zdarzenia do funkcji resureElements ().
• W kodzie JavaScript zdefiniuj funkcję o nazwie „UsuńElements ()".
• W swojej definicji zastosuj „Szyk.z()" I "getElementsByClassName ()”Metody w połączeniu, aby zwrócić pobierane elementy z określoną klasą w postaci tablicy.
• Następnie zastosuj „dla każdego()" I "usunąć()”Metody do iterowania elementów w poprzednim kroku i usuwania ich odpowiednio na przycisku kliknij.

Wyjście

Powyższe wyjście oznacza, że ​​pożądana funkcjonalność jest wypełniona.

Wniosek

„„dla każdego()" I "usunąć()„Metody w połączeniu z„QuerySelelection ()”Metoda lub„Szyk.z()" I "getElementsByClassName ()”Metody można zastosować do usunięcia wszystkich elementów za pomocą określonych klas za pomocą JavaScript. Poprzednie metody można zastosować w celu bezpośredniego dostępu do elementów według klasy i usuwania ich poprzez iterację wzdłuż nich, obejmując w ten sposób mniejszą złożoność kodu. Te ostatnie metody można wdrożyć w połączeniu w celu uzyskania dostępu do elementów według klasy, zwrócenia ich w formie tablicy i usunięcia ich, iterując przez nie. W tym artykule wyjaśniono, jak usunąć wszystkie elementy za pomocą określonej klasy za pomocą JavaScript.