Minulý týden jsme se podívali na to, jak vytvořit nový prvek a vložit jej do DOM pomocí vanilkového JavaScriptu. Dnes se podíváme na to, jak odstranit prvky z DOM pomocí JavaScriptu.
Jsou dva způsoby, jak vymazat prvek z DOM v JavaScriptu. Prvek můžete buď skrýt pomocí vložených stylů, nebo jej zcela odstranit.
Chcete-li skrýt prvek z DOM v JavaScriptu, můžete použít vlastnost stylu DOM:
// grab element you want to hide
const elem = document.querySelector('#hint');
// hide element with CSS
elem.style.display = 'none';
Jak můžete vidět výše, právě jsme změnili typ zobrazení prvku na none pomocí style vlastnictví. Tento přístup je velmi užitečný, pokud chcete dočasně skrýt prvek z DOM a chcete jej v určitém okamžiku vrátit zpět na základě uživatelských interakcí.
Případně, pokud chcete odstranit prvek z DOM zcela, můžete použít removeChild() vlastnost:
// grab element you want to hide
const elem = document.querySelector('#hint');
// remove element
elem.parentNode.removeChild(elem);
removeChild() metoda odstraní daný podřízený uzel zadaného prvku. Vrací odstraněný uzel jako Node objekt nebo null pokud uzel neexistuje. Funguje ve všech moderních i starých prohlížečích včetně Internet Exploreru.
ES6 remove() Metoda
removeChild() metoda funguje skvěle pro odstranění prvku, ale můžete ji volat pouze na parentNode prvku, který chcete odstranit.
Moderním přístupem k odstranění prvku je použití remove() metoda. Stačí zavolat tuto metodu na prvek, který chcete odstranit z DOM, jako níže:
// grab element you want to hide
const elem = document.querySelector('#hint');
// remove element from DOM (ES6 way)
elem.remove();
Tato metoda byla zavedena v ES6 a v tuto chvíli funguje pouze v moderních prohlížečích. Můžete však použít polyfill, aby byla kompatibilní s aplikací Internet Explorer 9 a vyšší.