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

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>

Answer 1

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 ?

1. 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>

Answer 2

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>

Answer 3

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.