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

possible duplicate of How to remove a property from a javascript object — cske
– cske, Commented Sep 12, 2013 at 17:45
@cske (and others who think it's a duplicate), don't confuse removing a property from a Javascript object, with removing an attribute from a DOM object. If this were a javascript object it would have worked. — Ian Boyd
– Ian Boyd, Commented Sep 12, 2013 at 18:01
delete works(but cleaner to use set/get methods) looks like a duck, swims like a duck, and quacks like a duck, ... you are accessing DOM objects (browser internal) attributes with a javascript interface — cske
– cske, Commented Sep 12, 2013 at 18:15

Paul · Accepted Answer · 2013-09-12 17:54:47Z

25

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"

edited Sep 12, 2013 at 17:54

answered Sep 12, 2013 at 17:49

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ian Boyd Over a year ago

Is there guidance somewhere that accessing a DOM object's .attributes collection is to be avoided? If so, then i have a world of code to re-think.

Paul Over a year ago

@IanBoyd I'm not sure of any particular reference material. I've never worked directly with it. I know that there are some inconsistencies though. In IE8 when you iterate through it you get all possible attributes whereas in IE9 you only get the ones that have been defined. It also seems to be incompatible with removeAttribute judging from the behaviour you describe in your question.

Pacerier Over a year ago

@Paulpro, Why do you use foo.hasAttribute('x') instead of foo.x === undefined?

Paul Over a year ago

foo.x is a property, not an attribute, and might not have the same value as foo.get attribute( 'x' )

Collectives™ on Stack Overflow

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

State table

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

State table

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related