3

Preciso remover todas as classes que comecem com btn-*.

Meu 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');
}

O problema é que ele só exclui uma classe específica.

3
  • Você poderia selecionar as classes por expressão regular, trocar o nome de todas elas para um mesmo nome e então remover. 18/10/2019 às 12:50
  • Queres remover num elemento específico ou em todos?
    – Sergio
    18/10/2019 às 12:54
  • No meu caso esse código é parte de uma função da qual pega um elemento em específico. Daí quero remover do mesmo elemento a classe. 18/10/2019 às 12:59

2 Respostas 2

5

Basta você percorrer todas as classes do seu elemento e remover aquelas que satisfazem a sua condição:

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>

6
  • E se a class começar com outro nome ? O que pode ser feito ?
    – ScrapBench
    18/10/2019 às 13:44
  • @ScrapBench Como assim começar com outro nome?
    – Woss
    18/10/2019 às 13:44
  • if (className.startsWith('btn-')) tava a pensar se a class fosse "coisa-pra-chatear btn-primary btn-block" por exemplo, esse If seria validado na mesma ?
    – ScrapBench
    18/10/2019 às 13:46
  • 2
    Sim, porque ele considera cada classe separadamente. A condição é aplicada em coisa-para-chatear e depois em btn-primary; como somente a segunda satisfaz a condição, só ela será removida.
    – Woss
    18/10/2019 às 13:47
  • 1
    Vc é o bichão mesmo hein! :D
    – hugocsl
    18/10/2019 às 16:07
2

Insira em todos os seus <button> a class btn em prefixo, exemplo:

<button class="btn btn-sucess">

Dessa forma o metodo getElementsByClassName(); vai criar uma array desses 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';
   }
}

No meu caso esse código é parte de uma função da qual pega um elemento em específico. Daí quero remover do mesmo elemento a classe.

function removerClass(elem,class_que_deseja_remover){
  if(elem.className == class_que_deseja_remover){
   // codigo a executar
  }
}
4
  • Essa função document.getElementById('contato_'+id).classList.remove('btn-danger') já remove classe específica. Gostaria de excluir as classes com prefixo " btn- " 18/10/2019 às 13:20
  • procura entao com if(btns[i].className.includes('btn-')){ //fazer algo} editei a resposta pra incluir isso
    – ScrapBench
    18/10/2019 às 13:22
  • Cuidado que includes procura na string inteira, o que retornaria true para a classe foobtn-yellow mesmo sem possuir o prefixo desejado.
    – Woss
    18/10/2019 às 13:29
  • dar um espaço antes do entao resolve isso ? ' btn-' eu mei que ja sabia disso dai ter feito nao um querySelector mas elementByClassName pra filtrar antes
    – ScrapBench
    18/10/2019 às 13:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .