Удалить класс при повторном нажатии

Question

Как удалять активный класс (.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>

Answer 1

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>

Answer 2

оно?

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>

Answer 3

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

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>

БЛОГ НА HUSL

Удалить класс при повторном нажатии

Ответы (3 шт):