removeAttribute removes all other classes associated with element

Question

I am trying to use removeAttribute() to remove one specific class attribute from an element. The problem is that removeAttribute() seems to remove all of the other defined class attributes on the element.

Example:

HTML

<span id="click">Click</span>
<div id="box" class="blue dotted width-50"></div>

CSS

.blue {
  background-color: blue;
}

.dotted {
  border: thin dotted grey;
}

.width-50 {
  width: 50px;
  height: 50px;
}

JS

var el = document.getElementById('click');
el.addEventListener("click", removeColor, false);


function removeColor() {
    var box = document.getElementById('box');
    box.removeAttribute('class', 'blue');
}

How can I just remove the one class attribute from the element, without affecting the other class attributes on the element?

http://jsbin.com/xoxodezeze/edit?html,css,js,output

score 2 · Accepted Answer · answered Sep 20 '17 at 18:16

You need to use

function removeColor() {
    var box = document.getElementById('box');
    box.classList.remove('blue');
}

The problem is that removeAttribute() removes the complete attribute name class SO <div id="box" class="blue dotted width-50"></div> becomse like <div id="box" ></div>.

You just want to remove the class here is doc https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

removeAttribute removes all other classes associated with element

1 Answers1