Borrar un atributo de un elemento (removeAttribute)

La actividad inversa de agregar un atributo a una marca HTML se logra mediante el método removeAttribute.

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');