Element.
Usuwa element z dokumentu razem z całą jego zawartością.
- Zwraca
undefined- Zmienia oryginał
- Tak
Przykład
#const notification = document.querySelector('#n1')
notification.remove()
console.log(document.querySelector('#n1'))
console.log(notification.isConnected)
console.log(document.querySelectorAll('#notifications li').length)Definicja i zastosowanie
#Metoda remove() odłącza element od dokumentu, więc znika on ze strony razem ze wszystkimi dziećmi. Wywołujesz ją bezpośrednio na elemencie, który chcesz usunąć, bez odwoływania się do jego rodzica.
Usunięty element nadal istnieje w pamięci, dopóki przechowujesz odwołanie do niego w zmiennej. Możesz go później wstawić z powrotem, np. przez append(). Właściwość isConnected powie Ci, czy element jest aktualnie w dokumencie.
Starszy sposób to parent.removeChild(element). Żeby usunąć wszystkie dzieci elementu naraz, najprościej wywołać element.replaceChildren() bez argumentów.
Składnia
#element.remove()Więcej przykładów
#const cart = document.querySelector('#cart')
cart.addEventListener('click', (event) => {
if (!event.target.matches('.delete')) return
event.target.closest('li').remove()
console.log('Pozycji w koszyku:', cart.children.length)
})
cart.querySelector('.delete').click()document.querySelectorAll('#lessons .done').forEach((item) => item.remove())
const lessons = document.querySelector('#lessons')
console.log(lessons.children.length)
console.log(lessons.textContent)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Usuwając elementy z listy
querySelectorAll()w pętli, nic nie ryzykujesz, bo ta lista jest statyczna. Uważaj natomiast na „żywe” kolekcje, takie jakchildren. - Jeśli element ma wrócić na stronę, zachowaj odwołanie do niego w zmiennej i wstaw go ponownie przez
append(). - Do wyczyszczenia całej zawartości elementu użyj
element.replaceChildren().
Powiązane hasła
#- Element.append()Dodaje elementy lub tekst na końcu zawartości elementu.
- Element.replaceWith()Zastępuje element w dokumencie innymi elementami lub tekstem. Stary element zostaje usunięty ze strony.
- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- document.querySelectorAll()Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- Element.closest()Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
- Event.targetElement, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.