How to remove a class of multiple elements whose names obey a certain criterion

Question

How to remove a class of multiple elements whose names obey a certain criterion

Asked 5 years, 2 months ago

Viewed 118 times

3

I need to remove all classes starting with btn-*.

My script:

if (document.getElementById('contato_'+id).classList.contains('btn-danger') ){
    document.getElementById('contato_'+id).classList.remove('btn-danger');
    document.getElementById('contato_'+id).classList.add('btn-success');
}

The problem is that it only excludes a specific class.

You could select the classes by regular expression, rename them all to the same name and then remove.

– Luiz Fernando da Silva

2019/10/18 at 12:50
You want to remove in a specific element or in all?

– Sergio

2019/10/18 at 12:54
In my case this code is part of a function from which you take a specific element. Then I want to remove the class from the same element.

– André Cabral

2019/10/18 at 12:59

2 answers

5

Just go through all the classes of your element and remove those that satisfy your condition:

const button = document.querySelector('button')

for (let className of [...button.classList]) {
  console.log(`Testando a classe ${className}`)
  if (className.startsWith('btn-')) {
    button.classList.remove(className)
    console.log(`Removida a classe ${className}`)
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button type="button" class="btn btn-primary btn-lg">Large button</button>

What if the class starts with another name ? What can be done ?

– ScrapBench

2019/10/18 at 13:44
@Scrapbench How so start with another name?

– Woss

2019/10/18 at 13:44
if (className.startsWith('btn-')) I was wondering if the class was "thing-to-bother btn-Primary btn-block" for example, this If would be validated in the same ?

– ScrapBench

2019/10/18 at 13:46
2

Yes, because it considers each class separately. The condition is applied in coisa-para-chatear and then in btn-primary; as only the second satisfies the condition, only it will be removed.

– Woss

2019/10/18 at 13:47
Muchas Gracias

– ScrapBench

2019/10/18 at 13:48
1

You’re the same faggot huh! D

– hugocsl

2019/10/18 at 16:07

Show 1 more comment

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by ScrapBench • **634** points · Answer 1 · 2019-10-18T12:55:43+00:00

Insert in all your <button> class btn in prefix, example:

<button class="btn btn-sucess">

Thus the method getElementsByClassName(); will create an array of these Buttons;

var btns = document.getElementsByClassName("btn");


var len = btns.length;

for(var i = 0; i < len; i++){
   if(btns[i].className.includes('btn-')){
      btns[i].className = ''; //vazio se quiser retirar todas as classes;
      btns[i].className = 'nome_de_outra_class';
   }
}

In my case this code is part of a function from which you take a specific element. Then I want to remove the class from the same element.

function removerClass(elem,class_que_deseja_remover){
  if(elem.className == class_que_deseja_remover){
   // codigo a executar
  }
}