17

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
Community
  • 1
  • 1
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
  • possible duplicate of [How to remove a property from a javascript object](http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object) – cske Sep 12 '13 at 17:45
  • http://jsfiddle.net/7su7C/1/ – cske Sep 12 '13 at 17:46
  • 3
    @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 Sep 12 '13 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 Sep 12 '13 at 18:15

1 Answers1

24

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"
Paul
  • 139,544
  • 27
  • 275
  • 264
  • 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. – Ian Boyd Sep 12 '13 at 18:00
  • @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. – Paul Sep 12 '13 at 18:03
  • @Paulpro, Why do you use `foo.hasAttribute('x')` instead of `foo.x === undefined`? – Pacerier Jan 27 '15 at 06:57
  • `foo.x` is a property, not an attribute, and might not have the same value as `foo.get attribute( 'x' )` – Paul Jan 27 '15 at 15:04