La scorsa lezione riguardava i metodi per creare elementi HTML. In questa lezione, invece, vediamo quali sono i metodi jQuery per eliminarli.
Per eliminare gli elementi dalla pagina HTML, oppure per eliminare il loro contenuto, possiamo utilizzare diversi metodi jQuery predefiniti:
| Metodo | Descrizione |
.remove() | Rimuove un elemento HTML e il suo contenuto. |
.detach() | Rimuove un elemento HTML e il suo contenuto, mantenendo i dati memorizzati e gli eventi associati ad esso. |
.empty() | Rimuove gli elementi figli e il contenuto di un elemento specificato. |
.unwrap() | Rimuove gli elementi genitori dell'elemento specificato. |
Il metodo .remove() rimuove un elemento o gli elementi HTML specificati.
La sua sintassi è: $(elemento).remove(filtro). Vediamo come utilizzare i parametri:
Vediamo un esempio senza il parametro filtro:
<div>Questo testo viene eliminato</div>
<div>Anche questo <b>testo qui</b>!</div>
<button>Elimina i div</button>
<script>
$("button").click(function(){
$("div").remove();
});
</script>Nell'esempio, utilizziamo un evento di click per eseguire la funzione di eliminazione dei <div>.
Vediamo un altro esempio con il parametro filtro:
<div class="elimina">Verrà eliminato questo</div>
<div>Ma non quest'altro</div>
<button>Elimina i div</button>
<script>
$("button").click(function(){
$("div").remove(".elimina");
});
</script>Nell'esempio, utilizziamo un selettore della classe per selezionare solo il primo <div> da eliminare.
Il metodo .detach() ha lo stesso funzionamento di .remove(), ma i suoi dati rimangono salvati anche dopo l'eliminazione. In questo modo, ad esempio, si può recuperare il suo contenuto anche se non è più nella pagina HTML dopo averlo salvato in una variabile.
La sua sintassi è: $(elemento).detach(filtro). Il filtro (facoltativo) specifica quali elementi devono essere eliminati. Ad esempio, puoi indicare una classe specifica o un id.
Vediamo un esempio:
<div class="testo" style="color:red">Verrà eliminato questo testo</div>
<button>Elimina il div</button>
<script>
$("button").click(function(){
var elemento = $("div").detach();
alert(elemento.attr("style")); // "color:red"
});
</script>Nell'esempio, l'elemento eliminato viene salvato nella variabile elemento. Questa variabile si può utilizzare successivamente. In questo caso, abbiamo recuperato il valore dell'attributo style (abbiamo visto come fare in questa lezione).
Il metodo .empty() elimina tutti gli elementi figli e il contenuto di un elemento specificato.
La sintassi del metodo è: $(elemento).empty(). Non accetta parametri aggiuntivi.
Ecco un esempio di .empty():
<div style="background-color:yellow;padding:10px">
Se clicchi il pulsante
<p>questo div si svuoterà</p>
</div>
<button>Svuota il div</button>
<script>
$("button").click(function(){
$("div").empty();
});
</script>Il metodo .unwrap() rimuove gli elementi genitori dell'elemento figlio specificato. Ad esempio, se specifichi un elemento <p> all'interno di un <div>, verrà eliminato il <div> ma non il <p>.
La sintassi è: $(elemento).unwrap(). Ecco un esempio:
<div style="background-color:yellow;padding:10px">
<p id="paragrafo">Un testo di esempio</p>
</div>
<button>Elimina il div</button>
<script>
$("button").click(function(){
$("#paragrafo").unwrap();
});
</script>Nell'esempio, dopo aver cliccato il pulsante, verrà eliminato il <div> e rimarrà soltanto <p>.