Stack Exchange
Удалить класс при повторном нажатии
Как удалять активный класс (.red) при повторном клике на блок? Что-то совсем запутался...


const wrapper = document.querySelector('.buttons');
const btns = wrapper.querySelectorAll('.btn');

btns.forEach((item, i) => {
  btns[i].addEventListener('click', () => {
    btns.forEach(item => {
      item.classList.remove('red');
    });
  
    if (btns[i].classList.contains('red')) {
      btns[i].classList.remove('red');
    } else {
      btns[i].classList.add('red');
    }
  });
});
.buttons {
  padding: 10px;
  background: gray;
  display: flex;
}

.btn {
  padding: 0;
  margin: 0 10px 0 0;
  width: 100px;
  height: 50px;
  background: gold;
  border: none;
}

.red {
  background: red;
}
<div class="buttons">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>




оно?


const wrapper = document.querySelector('.buttons');
const btns = wrapper.querySelectorAll('.btn');

btns.forEach((item, i) => {
    btns[i].addEventListener('click', () => {
        let itemHasClassRed = btns[i].classList.contains('red');
        
        if (itemHasClassRed) {
            btns[i].classList.remove('red');
            return;
        }
                
        btns.forEach(item => {
          item.classList.remove('red');
        });
  
        btns[i].classList.add('red');
    });
});
.buttons {
  padding: 10px;
  background: gray;
  display: flex;
}

.btn {
  padding: 0;
  margin: 0 10px 0 0;
  width: 100px;
  height: 50px;
  background: gold;
  border: none;
}

.red {
  background: red;
}
<div class="buttons">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>






const wrapper = document.querySelector('.buttons');
const btns = wrapper.querySelectorAll('.btn');

btns.forEach(item => {
 item.addEventListener('click', function(){
   if (this.classList.contains('red')) 
   {
     this.classList.remove('red')
     return
   }
   btns.forEach(el=> {el.classList.remove('red')})   
   this.classList.add('red')   
  });
});
.buttons {
  padding: 10px;
  background: gray;
  display: flex;
}

.btn {
  padding: 0;
  margin: 0 10px 0 0;
  width: 100px;
  height: 50px;
  background: gold;
  border: none;
}

.red {
  background: red;
}
<div class="buttons">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>




Не подойдёт, должен быть один активный класс и при повторном клике он должен удаляться

Неа) Оно должно работать как у меня но когда блок окрашен и кликнули на него класс должен удалиться, вот это я не могу решить

@Дмитрий ну тогда так )

Видимо такое нужно было.


const wrapper = document.querySelector('.buttons');
const btns = wrapper.querySelectorAll('.btn');

for (const btn of btns) {
  btn.addEventListener('click', function() {

    if (this.classList.contains('red')) {
      this.classList.remove('red');
      return;
    }
    
    btns.forEach((btn) => btn.classList.remove('red'));
    this.classList.add('red');

  });
}
.buttons {
  padding: 10px;
  background: gray;
  display: flex;
}

.btn {
  padding: 0;
  margin: 0 10px 0 0;
  width: 100px;
  height: 50px;
  background: gold;
  border: none;
}

.red {
  background: red;
}
<div class="buttons">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>



