Esercizi Eliminare Elementi DOM Javascript

Ecco degli esercizi semplici con soluzione per praticare le basi per l’eliminazione di elementi nel DOM in Javascript.

Esercizio 1

Rimuovere un elemento tramite il suo ID:

const elementoDaRimuovere = document.getElementById("mioElemento");
elementoDaRimuovere.remove();

Esercizio 2

Rimuovere un elemento figlio da un elemento padre:

const elementoPadre = document.getElementById("elementoPadre");
const elementoFiglioDaRimuovere =
  elementoPadre.querySelector(".elementoFiglio");
elementoPadre.removeChild(elementoFiglioDaRimuovere);

Esercizio 3

Rimuovere tutti gli elementi figli di un elemento padre:

const elementoPadre = document.getElementById("elementoPadre");
while (elementoPadre.firstChild) {
  elementoPadre.firstChild.remove();
}

Esercizio 4

Rimuovere un elemento al click su di esso:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("click", function () {
  elemento.remove();
});

Esercizio 5

Rimuovere un elemento al passaggio del mouse su di esso:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("mouseover", function () {
  elemento.remove();
});

Esercizio 6

Rimuovere gli elementi che corrispondono a un selettore CSS:

const elementiDaRimuovere = document.querySelectorAll(".elementoDaRimuovere");
elementiDaRimuovere.forEach(function (elemento) {
  elemento.remove();
});

Esercizio 7

Rimuovere un elemento dopo un determinato intervallo di tempo:

const elemento = document.getElementById("mioElemento");
setTimeout(function () {
  elemento.remove();
}, 3000); // Rimuovi l'elemento dopo 3 secondi

Esercizio 8

Rimuovere un elemento quando si fa scorrere la pagina:

window.addEventListener("scroll", function () {
  const elemento = document.getElementById("mioElemento");
  elemento.remove();
});

Esercizio 9

Rimuovere un elemento dopo un determinato evento:

const pulsante = document.getElementById("mioPulsante");
pulsante.addEventListener("click", function () {
  const elementoDaRimuovere = document.getElementById("elementoDaRimuovere");
  elementoDaRimuovere.remove();
});

Esercizio 10

Rimuovere gli elementi che corrispondono ad una classe tramite querySelector dopo un click di un bottone:

const pulsante = document.getElementById("mioPulsante");
pulsante.addEventListener("click", function () {
  const elementiDaRimuovere = document.querySelectorAll(".elementoDaRimuovere");
  elementiDaRimuovere.forEach(function (elemento) {
    elemento.remove();
  });
});