How to remove an attribute from a DOM element using Javascript?

Question

i am trying to use javascript to remove an attribute from a DOM node:

<div id="foo">Hi there</div>

First i add an attribute:

document.getElementById("foo").attributes['contoso'] = "Hello, world!";

Then i remove it:

document.getElementById("foo").removeAttribute("contoso");

Except the attribute is still there.

So then i try to really remove it:

document.getElementById("foo").attributes['contoso'] = null;

And now it's null, which is different than when it started, which was undefined.

What is the correct way to remove an attribute from an element?

jsFiddle playground

Note: Replace the attribute contoso, with the attribute required, and you'll understand what i'm trying to do.

State table

                       foo.attributes.contoso  foo.hasAttribute("contoso")
                       ======================  ===========================
Before setting         undefined               false
After setting          Hello, world!           false
After removing         Hello, world!           false
After really removing  null                    false

Answer 1

Don't use the attributes collection to work with attributes. Instead use setAttribute and getAttribute:

var foo = document.getElementById("foo");

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null

foo.setAttribute('contoso', 'Hello, world!');

foo.hasAttribute('contoso'); // true
foo.getAttribute('contoso'); // 'Hello, world!'

foo.removeAttribute('contoso');

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null, 

// It has been removed properly, trying to set it to undefined will end up
// setting it to the string "undefined"