Rimuovere attributi agli elementi del dom con JavaScript

In questa guida impareremo principalmente a rimuovere attributi agli elementi del dom con JavaScript.

Nelle guide precedenti abbiamo visto come creare nuovi attributi e nuovi elementi in una pagina web.

Al fine di comprendere quello che stiamo trattando, potete consultare i seguenti tutorial:

Creare elementi dom JavaScript
Creare attributi agli elementi.

Utilizzare removeAttribute() per rimuovere attributi agli elementi del dom con JavaScript

Per rimuovere un attributo utilizzeremo il metodo removeAttribute().

La sintassi è dunque questa:

element.removeAttribute(nome_attributo);

dove nome_attributo è il nome dell’attributo da rimuovere.

Esempio di come rimuovere attributi

Se provate a passate con il mouse sopra il link sotto, dove c’è scritto Coding Creativo, compare la manina con la possibilità di cliccarci sopra.

Se adesso premete il pulsante sotto, il collegamento si toglie e il testo Coding Creativo diventa rosso.

Coding Creativo

Procedimento

Innanzitutto creo un collegamento al sito con il tag a. Dopo inserisco, subito sotto, il pulsante che rimuoverà l’attributo quando verrà fatto clic su di esso.

<div id="collegamento">
  <a href="https://www.codingcreativo.it" target="_blank">Coding Creativo</a>
</div>
<button onclick="link()">Togli collegamento</button>

Poi scrivo una semplicissima funzione in JavaScript. Questa funzione utilizzerà il metodo removeAttribute() per rimuovere un attributo dal tag a.

Utilizzerà anche la proprietà style.

In particolare in questo esempio utilizziamo la proprietà style per cambiare colore al testo.

Ecco dunque la funzione che ho usato:

<div id="collegamento">
  <a href="https://www.codingcreativo.it">Coding Creativo</a>
</div>
<button onclick="rimuoviLink()">Rimuovi href</button>

<script type="text/javascript">
function rimuoviLink() {
  // Selezioniamo l'elemento con id "collegamento"
  const elemento = document.getElementById("collegamento");

  // Rimuoviamo l'attributo href
  elemento.removeAttribute("href");

  // Cambiamo il colore del testo in rosso
  elemento.style.color = "red"; 
}
</script>

Utilizzare removeAttributeNode

Il metodo removeAttributeNode(), rimuove l’attributo specificato da un elemento e restituisce l’attributo rimosso come oggetto Attr.

Potrei allora costruire la funzione di prima in questo modo:

<div id="collegamento">
  <a href="https://www.codingcreativo.it" target="_blank">Coding Creativo</a>
</div>
<button onclick="rimuoviLink()">Rimuovi link</button>

<script>
function rimuoviLink() {
  // Selezioniamo l'elemento con id "collegamento"
  const elemento = document.getElementById("collegamento");

  // Recuperiamo l'attributo href
  const attr = elemento.getAttributeNode("href");

  // Rimuoviamo l'attributo href dall'elemento
  elemento.removeAttributeNode(attr);
}
</script>

Quindi con la funzione getAttributeNode() recupero il nodo dell’attributo e poi con removeAttributeNode() lo rimuovo.

Chiaramente questi sono solo dei semplici esempi per imparare a rimuovere attributi agli elementi del dom con JavaScript.

Lezione precedente: creare attributi agli elementi

Lezione successiva: altri esempi di getElementById