I can't delete the class, what's the error?

Question

Hi my code does not add "active" class. Please tell me. initially they should all be inactive. i posted it here https://jsfiddle.net/fjmy7ce0/2/ i get a message in the console "Cannot read property 'removeClass' of null"

let items = document.querySelector('.color__items');
  let item = document.querySelectorAll('.color__item');

  item.forEach(el => {
    el.addEventListener('click', function(){
      items.querySelector('.active').classList.
          remove('active');

          el.classList.add('active');
    });
  });

David says reinstate Monica, I didn’t find an answer, I still have an active class and it is not deleted — GRANDMASTER, Sep 13 '20 at 11:36

Carsten Massmann · Answer 1 · 2020-09-13T13:28:26.770

In your external jsfiddle snippet you had a problem with your CSS:

  .color__item-orange{
    background-color: #f58e08;
  }
} <=== SUPERFLUOUS bracket!!!
.color__item.active{
  opacity: 1;
}

Your add and remove classes can be replaced by a simple toggle. This also shortens the code.

Below you can see my amended version:

const item = [...document.querySelectorAll('.color__item')];
// delegated event attachment to the parent container:
document.querySelector('.color__items').addEventListener('click', ev=>
  item.forEach(el=>el.classList.toggle('active', el==ev.target))
)

.active {background-color:red}.color__items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 55px;
  border-radius: 15px;
  background-color: rgb(31, 33, 44);
  margin-bottom: 60px;
}
.color__item{ width: 26px; height: 26px; border-radius: 35%;
  border: none; cursor: pointer; opacity: 0.5; transition: all .3s;
 }
 .color__item:hover{ opacity: 1; }
 .color__item-title{ font-size: 21px; margin-bottom: 20px; }
  color__item-black{ background-color: #000000; }
 .color__item-white{ background-color: #fefefe; }
 .color__item-red{   background-color: #f50818; }
 .color__item-purple{background-color: #f508e7; }
 .color__item-blue{  background-color: #2f08f5; }
 .color__item-lightblue{background-color: #08cbf5;}
 .color__item-green{ background-color: #08f524; }
 .color__item-yellow{background-color: #e1f508; }
 .color__item-orange{background-color: #f58e08; }
 .active{ opacity: 1 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color__items">
 <button class="color__item color__item-black" type="button"></button>
 <button class="color__item color__item-white" type="button"></button>
 <button class="color__item color__item-red" type="button"></button>
 <button class="color__item color__item-purple" type="button"></button>
 <button class="color__item color__item-blue" type="button"></button>
 <button class="color__item color__item-lightblue" type="button"></button>
 <button class="color__item color__item-green" type="button"></button>
 <button class="color__item color__item-yellow" type="button"></button>
 <button class="color__item color__item-orange" type="button"></button>
</div>

score 0 · Accepted Answer · answered Sep 13 '20 at 12:47

You were nearly there. You just need to use querySelectorAll on all the elements and first on click remove classes from all the elements

Then, you need to event.target to add class only to the clicked element.

Live Working Demo:

let item = document.querySelectorAll('.color__item');

item.forEach(el => {
  el.addEventListener('click', function(e) {
    item.forEach(el => {
      el.classList.remove('active') //remove classes from all
    });
    e.target.classList.add('active') //add Class to the clicked element
  });
});

.color__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 55px;
  border-radius: 15px;
  background-color: rgb(31, 33, 44);
  margin-bottom: 60px;
}

.color__item {
  width: 26px;
  height: 26px;
  border-radius: 35%;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: all .3s;
}

.color__item:hover {
  opacity: 1;
}

.color__item-title {
  font-size: 21px;
  margin-bottom: 20px;
}

.color__item-black {
  background-color: #000000;
}

.color__item-white {
  background-color: #fefefe;
}

.color__item-red {
  background-color: #f50818;
}

.color__item-purple {
  background-color: #f508e7;
}

.color__item-blue {
  background-color: #2f08f5;
}

.color__item-lightblue {
  background-color: #08cbf5;
}

.color__item-green {
  background-color: #08f524;
}

.color__item-yellow {
  background-color: #e1f508;
}

.color__item-orange {
  background-color: #f58e08;
}

.color__item.active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color__items">
  <button class="color__item color__item-black" type="button"></button>
  <button class="color__item color__item-white" type="button"></button>
  <button class="color__item color__item-red" type="button"></button>
  <button class="color__item color__item-purple" type="button"></button>
  <button class="color__item color__item-blue" type="button"></button>
  <button class="color__item color__item-lightblue" type="button"></button>
  <button class="color__item color__item-green" type="button"></button>
  <button class="color__item color__item-yellow" type="button"></button>
  <button class="color__item color__item-orange" type="button"></button>
</div>

I can't delete the class, what's the error?

2 Answers2