CODEWITHSUNDEEP
javascript
Brian Patrick
Brian Patrick

Reputation: 341

Removing a class after clicking to add same class to a different element with JS

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>

Upvotes: 0

Views: 54

Answers (3)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Tu Nguyen
Tu Nguyen

Reputation: 10189

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>

Upvotes: 1

choz
choz

Reputation: 17898

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

Upvotes: 1

Related Questions