0

I have a nav at the bottom of a hero container. When I click on an item I want it to have an active class applied to it. When I click another item I want the previous item to have the active class removed and the active class applied to the new element.

So far I can click to add the active class to each element but can't figure out how remove it from a previously clicked element. Any help would be appreciated.

I've provided some example code.

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

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    if (items[i].classList.contains('active') === false) {
      this.classList.toggle('active');
    } else {
      this.classList.remove('active');
    }
  })
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

1
  • Note: Removing a class that does not exist, does NOT throw an error
    – Narendra
    Oct 15, 2018 at 5:58

3 Answers 3

1

Remove the class from element (if there is any) inside the event handler function. You can use forEach() to implement that.

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

for (let i = 0; i < items.length; i++) {
   items[i].addEventListener('click', function() {
      items.forEach(el =>  el.classList.remove('active'));
      if(items[i].classList.contains('active') === false) {
         this.classList.toggle('active');
      } else {
         this.classList.remove('active');
      }
   })
}
.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

.item {
   border: 2px solid orange;
   padding: 40px;
}

.active {
   background: orange;
   color: white;
}
<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
</div>

OR: You can target the element only with that class (active), if present, remove the class from that element.

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

for (let i = 0; i < items.length; i++) {
   items[i].addEventListener('click', function() {
      var active = document.querySelector('.active');
      if(active)
        active.classList.remove('active');
      if(items[i].classList.contains('active') === false) {
         this.classList.toggle('active');
      } else {
         this.classList.remove('active');
      }
   })
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

0
1

One of possible way to achieve this. When an item is clicked, do;

  1. Remove active class from all items.
  2. Add the active class to the clicked item and only this.

E.g.

let items = document.querySelectorAll('.item'),
  removeClassFromItems = function (className) {
    // Iterate all 'items', and remove the `className` from its class.
    for (let i = 0; i < items.length; i++) {
      items[i].classList.remove(className);
    }
  };

// Iterate all items and attach an event handler for click event.
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    removeClassFromItems('active');
    this.classList.add('active');
  });
}
1

This is one solution, you could add this line in your code:

document.querySelectorAll('.item').forEach(e => e.classList.remove('active')); 

That will remove all active class for each time the item is clicked. To see it in action:

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

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
  
    document.querySelectorAll('.item').forEach(e => e.classList.remove('active')); // add this
    
    if (items[i].classList.contains('active') === false) {
      this.classList.toggle('active');
    } else {
      this.classList.remove('active');
    }
  })
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  border: 2px solid orange;
  padding: 40px;
}

.active {
  background: orange;
  color: white;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.