Eliminare elementi di jQuery

Una parte molto importante di jQuery è la manipolazione del DOM.

jQuery fornisce molti metodi per rimuovere elementi esistenti o contenuto dal documento.

In questa sezione, spiegheremo come rimuovere elementi/contenuto HTML dal DOM.

Eliminazione elementi/contenuto jQuery

Con jQuery, possiamo facilmente rimuovere elementi HTML.

Abbiamo i seguenti metodi jQuery per rimuovere elementi e contenuto:

• remove()

• empty()

• unwrap()

Vi mostrerò come utilizzare ciascun metodo.

Metodo jQuery remove()

jQuery remove()Il metodo rimuove l'elemento selezionato e tutti i suoi figli dal DOM.

Esempio di rimozione di tutti i paragrafi dal DOM:

$("button").click(function(){
　　$("p").remove();
});

jQuery remove()Il metodo accetta anche un parametro che ti permette di filtrare gli elementi da rimuovere.

Il parametro può essere qualsiasi selettore jQuery.

Esempio di rimozione di tutti i paragrafi che contengono "Hello" dal DOM:

$("button").click(function(){
　　$("p").remove(":contains('Hello')");
});

Metodo jQuery empty()

jQuery empty()Il metodo rimuove tutti i nodi figli (inclusi i nodi di testo) dall'elemento selezionato.

Esempio di rimozione di tutti i nodi figli (inclusi i nodi di testo) da tutti i paragrafi:

$("button").click(function(){
　　$("p").empty();
});

Attenzione:Questo metodo non elimina l'elemento stesso o i suoi attributi.

Metodo unwrap() di jQuery

jQuery unwrap()Il metodo elimina il genitore dell'elemento selezionato.

Esempio seguente che elimina tutti i genitori dei paragrafi:

$("button").click(function(){
　　$("p").unwrap();
});

jQuery rimuove attributi - removeAttr()

jQuery removeAttr()Il metodo rimuove uno o più attributi dall'elemento selezionato.

Esempio seguente che elimina l'attributo href da tutti i link:

$("button").click(function(){
　　$("a").removeAttr("href");
});

Per eliminare più attributi, separare i nomi degli attributi con spazi.

Esempio seguente che elimina più attributi da tutti i paragrafi:

$("button").click(function(){
　　$("p").removeAttr("id class title");
});

Riferimento HTML di jQuery

Per i riferimenti completi ai metodi HTML, visitare il nostroRiferimento HTML / CSS di jQuery.