Il metodo remove() del framerwork jQuery permette di rimuovere un elemento html dal DOM della pagina.
Diversamente da tutti i metodi che modificando il css rendono “invisibile” un elemento, il metodo remove() elimina in maniera quasi del tutto definitiva l’elemento, rendendo nulli tutti i successivi riferimenti ad esso.
La sintassi, come è buona abitudine di jQuery, è molto semplice e grazie all’uso dei vari selettori disponibili le possibilità di utilizzo del metodo .remove() sono pressochè infinite.
Potremo ad esempio associare il metodo ad alcuni bottoni o link delle nostre pagine, permettendo agli utenti di “eliminare” i contenuti che non desiderano consultare. Pensiamo ad esempio ad una finestra in sovraimpressione che mostra al suo interno un banner: sarebbe elengante e cortese fornire un icona di chiusura che ne permetta la rimozione definitiva dalla pagina.

La sintassi di base del metodo .remove() è la seguente:

$('id_elemento').remove();

Tramite il selettore ID andremo a rimuovere l’elemento il cui id è uguale a “id_elemento“. Dopo l’esecuzione del semplice codice proposto, vedremo “scomparire”, in maniera quasi brutale, l’elemento dalla pagina web e nel DOM non ne resterà più traccia.
Vediamo ora qualche altro esempio utilizzando gli altri selettori disponibili:

// Selettore di classe
$('.nome_classe').remove();

// Selettore di tag
$('p').remove();

// Selettore di contenuto
$("p:contains('Ciao')").remove();

Negli esempi proposti, i vari selettori operano su più elementi (ad esempio tutti gli elementi appartenenti ad una determinata classe, tutti i blocchi di tipo <p> oppure tutti gli elementi di tipo <p> che contengono la parola ‘Ciao’), quindi invocando il metodo remove() elimineremo tutti questi elementi grazie ad una sola riga di codice.
Prima di concludere prendiamo in considerazione due aspetti del metodo remove():

• un elemento rimosso non può essere recuperato;
• la rimozione degli elementi tramite class comporta la rimozione di tutti gli elementi appartenenti a quella classe, indipendetemente dal tipo di elemento (DIV, SPAN, P, ecc);

Per porre, in parte, rimedio al primo caso possiamo memorizzare l’elemento (in una sorta di cache) prima che questo venga rimosso:

// Memorizzo l'elemento in una variaibile
var elemento = $('#id_elemento');

// Rimuovo l'elemento
$('#id_elemento').remove();

Il blocco nonostante sia stato eliminato dalla pagina web, è ancora presente in una variabile (var elemento), e può essere riutilizzato e volendo riposizionato all’interno del DOM, magari in un’altra posizione.
Per il secondo caso in analisi, invece, è necessario utilizzare il metodo remove() in maniera leggermente differente da come si è visto fino ad ora; possiamo così filtrare solo alcuni elementi da rimuovere che hanno una classe in comune, evitando la rimozione complessiva di tutti i blocchi:

// Rimozione solo dei div con classe 'nome_classe'
$('div').remove('.nome_classe');

Grazie alla riga di codice proposta, andremo ad eliminare gli elementi che hanno come nome classe “nome_classe” ma solo se di tipo DIV. Da notare, quindi la differenza con il codice proposto all’inizio dell’articolo, quando effettuavamo la rimozione di tutti gli elementi tramite selettore di classe.
Le funzioni viste sono state raccolte in una pagina web d’esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.