JavaScript Only - Remove Certain classes if present

Question

I have the following classes (below), they are added dynamically on the HTML (below).

I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.

HTML

<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>

Classes

<ul>
    <li>is--blue</li>
    <li>is--red</li>
    <li>is--yellow</li>
    <li>is--purple</li>
    <li>is--green</li>
    <li>is--pink</li>
    <li>is--orange</li>
</ul>

UPDATE:

So in a nutshell, I want to do this jQuery example in javascript:

$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');

This is what I have so far:

document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');

But I get this error:

Uncaught TypeError: Cannot read property 'classList' of undefined

Not sure if the classes part is supposed to be code or not. If not, use markdown to create the list. — Felix Kling, Mar 02 '15 at 18:43
@FelixKling this question differs, where I want classes to remain after the classes have been added. It is the test and and specific class removal is what I need help with. — Neil, Mar 02 '15 at 18:47
The other question shows how to remove a class from an element and even links to `classList`.... isn't that what you want? There is no need to test whether the class exists. — Felix Kling, Mar 02 '15 at 18:48
This is actually the better duplicate: [Change an element's CSS class with JavaScript](http://stackoverflow.com/q/195951/218196) --- I don't understand what more you need/want to know. — Felix Kling, Mar 02 '15 at 18:52
if class exists remove class attribute and add class attribute after add classes overlay__inner overlayActive clearfix — Sarath Babu Nuthimadugu, Mar 02 '15 at 18:58

score 0 · Answer 1 · answered Mar 02 '15 at 18:47

0

Removing a single class is rather straightforward, what are you having trouble with specifically?

var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
  el.classList.remove('is--blue');
});

.is--blue {
  color: blue;
}

<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>

answered Mar 02 '15 at 18:47

Etheryte

24,589
11
71
116

The problem here is that I have used this class elsewhere, plus I already have the object store so querying the selector is going to be slower that getting the ID. And yes I have multiple classes the code would need to if any colours are present (.is--red, .is--yellow and so on.) – Neil Mar 02 '15 at 18:54
1

@Neil: How you get a reference to the element is irrelevant to the question. You simply have to iterate over all class names you want to remove and remove them. I still don't understand what problem you have with that. – Felix Kling Mar 02 '15 at 18:56

JavaScript Only - Remove Certain classes if present

1 Answers1