El método removeAttribute() elimina el atributo especificado de un elemento. La diferencia entre este método y el método removeAttributeNode() es que el método removeAttributeNode() elimina el objeto Attr especificado , mientras que este método elimina el atributo con el nombre especificado . El resultado será el mismo. Además, este método no tiene valor de retorno, mientras que el método removeAttributeNode() devuelve el atributo eliminado, como un objeto Attr.
Consejo:
Utilice el método getAttribute() para devolver el valor de un atributo de un elemento, y use el método setAttribute() para agregar un atributo a un elemento.
Ejemplo
Elimine el atributo de clase de un elemento <h1>:
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1 class="democlass">Hola Mundo</h1>
<p id="demo">Haga clic en el botón para eliminar el atributo de clase del elemento h1.</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
document.getElementsByTagName("H1")[0].removeAttribute("class");
}
</script>
</body>
</html>
Ejemplo
Elimine el atributo <href> de un elemento <a>:
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" href="https://www.google.com">Un enlace: vaya a google.com</a>
<p id="demo">Haga clic en el botón para eliminar el atributo href del elemento a.</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
document.getElementById("myAnchor").removeAttribute("href");
}
</script>
</body>
</html>
Para ver el funcionamiento de este método implementaremos una página que muestra dos hipervínculos, luego mediante dos botones podemos crear o eliminar el atributo href de las respectivas marcas.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function eliminarAtributo()
{
var puntero=document.getElementById('enlace1');
puntero.removeAttribute('href');
puntero=document.getElementById('enlace2');
puntero.removeAttribute('href');
}function inicializarAtributo()
{
var puntero=document.getElementById('enlace1');
puntero.setAttribute('href','http://www.google.com.ar');
puntero=document.getElementById('enlace2');
puntero.setAttribute('href','http://www.yahoo.com.ar');
}
</script>
</head>
<body>
<a id="enlace1" href="http://www.google.com.ar">Google.</a><br>
<a id="enlace2" href="http://www.yahoo.com.ar">Yahoo.</a><br>
<input type="button" value="Eliminar atributos" onClick="eliminarAtributo()">
<input type="button" value="Inicializar atributos" onClick="inicializarAtributo()">
<br>
</body>
</html>
El código javascript
function eliminarAtributo() { var puntero=document.getElementById('enlace1'); puntero.removeAttribute('href'); puntero=document.getElementById('enlace2'); puntero.removeAttribute('href'); } function inicializarAtributo() { var puntero=document.getElementById('enlace1'); puntero.setAttribute('href','http://www.google.com.ar'); puntero=document.getElementById('enlace2'); puntero.setAttribute('href','http://www.yahoo.com.ar'); }
Lo nuevo se encuentra en la función eliminarAtributo.
Primero obtenemos la referencia del primer enlace cuyo id se llama enlace1:
var puntero=document.getElementById('enlace1');
Y ahora con la referencia a la marca HTML que se guardó en la variable puntero llamamos al método removeAttribute:
puntero.removeAttribute('href');
Lo mismo hacemos para el segundo enlace:
puntero=document.getElementById('enlace2'); puntero.removeAttribute('href');
Para crear el atributo lo hacemos como lo vimos en un concepto anterior:
var puntero=document.getElementById('enlace1'); puntero.setAttribute('href','http://www.google.com.ar'); puntero=document.getElementById('enlace2'); puntero.setAttribute('href','http://www.yahoo.com.ar');