How to remove the classes that begin with a certain string?

Question

I am trying to remove the classes that begin with a certain string.

Here is my code:

function myfunction() {
  const body = document.getElementsByTagName('div')[0];
  body.classList.remove('page*'); //remove page-parent
}

myfunction();

<div class="page-parent pop">
  check out
</div>

I looking the way to remove the class name by pure javascript, not using jquery — 3gwebtrain, Jun 26 '18 at 07:53
Seriously, I wish people would take time to understand the question before marking it as duplicate. The other question asked for a jQuery solution, which is very heavy handed. Although there are pure JavaScript solutions, a question tagged with jQuery is likely to be overlooked by others looking for a pure JavaScript solution. — Manngo, Oct 10 '19 at 20:16

score 9 · Answer 1 · answered Jun 26 '18 at 08:12

OK , there are many solution to this

first what causes your problem ?

in your code you just remove the class that should be page* and that's not a regular expression because you're using the double quotes .

also classList is a DOMTokenList which is a collection , so we need to iterate over it to test each value in the list to see if it meets specific criteria

how to solve this problem ?

first solution

use startWith string method

how ?

iterate over each class in classList check if it starts with what you search for remove it if yes

example

const p = document.getElementById('p');
p.classList.forEach(item=>{
    if(item.startsWith('page')) {
        p.classList.remove(item) ;
    }
})

.page-blue {
    color: blue;
}
.c {
    text-align: center;
    font-size: 1.4rem;
}

<p id="p" class=" c page-blue">
    hello I am p
</p>

also you can use simple regular expression for that

how ? using special-caret that tests if the input starts with the specified value

example

const p = document.getElementById('p');
p.classList.forEach(item=>{
    if(/^page/.test(item)) {
        p.classList.remove(item) ;
    }
})

.page-blue {
    color: blue;
}
.c {
    text-align: center;
    font-size: 1.4rem;
}

<p id="p" class=" c page-blue">
    hello I am p
</p>

score 1 · Accepted Answer · edited Jun 26 '18 at 08:09

1

This is a simple example by using loop regular expression check and remove item which is matched.

function myfunction() {
  var div = document.getElementsByTagName('div')[0];
  
  var matches = [];
  div.classList.forEach(function (value) {
    //remove page-parent
    if (/^page.+/.test(value)) {
      matches.push(value);
    }
  });
  matches.forEach(function (value) {
      div.classList.remove(value);
  });
}

myfunction();

<div class="page-parent pop">
  check out
</div>

edited Jun 26 '18 at 08:09

Gras Double

15,901
8
56
54

answered Jun 26 '18 at 07:55

Terry Wei

1,521
8
16

I have only single class at time, without loop can't we do? – 3gwebtrain Jun 26 '18 at 08:00
@Gras Double Thanks for correct the error of my carelessness – Terry Wei Jun 26 '18 at 08:01
@3gwebtrain loop is for checking all of the classes. Built-in method or any other method also do loop I think. – Terry Wei Jun 26 '18 at 08:03

Andrew Bone · Answer 3 · 2018-06-26T08:16:43.987

Here's a very "ES6" way of doing it.

We're converting the classList into an array with a spread operator then we are filtering the array with regex. This leaves us with an array of classes we want to remove so we can do a forEach over them and remove them.

I've used a little CSS to display the divs classes next to it.

const body = document.querySelector('div');

[...body.classList].filter(c => {
  return c.match(/^page.*/)
}).forEach(e => {
  body.classList.remove(e)
});

div:after {
  content: "("attr(class)")";
}

<div class="page-parent pop">
  check out
</div>

I hope you find this helpful.

How to remove the classes that begin with a certain string?

3 Answers3