Vanilla JS remove class from previous selection

Question

Im working with this part of code

   <div class="single-select">
        <div class="single-title">
            <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
        </div>
        <ul id="single-select-dropdown">
            <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
        </ul>
    </div>

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

function handleOptionSelected(e) {
    const newValue = e.target.textContent + ' ';
    const titleElem = document.querySelector('.single-title .title');
    titleElem.textContent = newValue;
    e.target.classList.add('active')
}

Everytime when i choose option JS should add to class list class 'active'. The point is that only single option can have this class on it. Can someone help me how to remove it everytime when i choose other option?

each time an option is chosen , first remove `active` class of them all , in a loop , then assign to the chosen one at the end . — Iman Emadi, Apr 07 '20 at 08:16

score 1 · Accepted Answer · answered Apr 07 '20 at 08:37

Wrap the callback in an anonymous function:

//...
option.addEventListener('click', function(e) {
  handleOptionSelected(e);
});
//...

Then add a the following before the callback:
```
//...
//option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
//  handleOptionSelected(e);
//});
//...
```
Now whenever the user clicks an option, all options will remove the class .active -- then the callback handleOptionSelected() will add .active to the clicked option.

Demo

Note: A CSS pseudo-element was added to demonstrate that there is only one .option.active at a time.

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => {
  option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
    handleOptionSelected(e);
  });
});

function handleOptionSelected(e) {
  const newValue = e.target.textContent + ' ';
  const titleElem = document.querySelector('.single-title .title');
  titleElem.textContent = newValue;
  e.target.classList.add('active');
}

.option::after {
  content: ' 'attr(class)
}

<div class="single-select">
  <div class="single-title">
    <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
  </div>
  <ul id="single-select-dropdown">
    <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
  </ul>
</div>

score 0 · Answer 2 · answered Apr 07 '20 at 08:19

Add this to your code

function handleOptionSelected(e) {
    const newValue = e.target.textContent + ' ';
    const titleElem = document.querySelector('.single-title .title');
    titleElem.textContent = newValue;

    // Add this part
    const listElem = document.getElementsByClassName('option');
    listElem.forEach(el => {
        el.classList.remove('active'));
    };

    e.target.classList.add('active');
}

score 0 · Answer 3 · answered Apr 07 '20 at 08:20

You have to iterate and remove the active class

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

function removeActive() {
  [...dropdownOptions].some(function(option) {
    // we are using .some assuming you have only 1 active class at any given time. If you think you will have multiple active classes, you can use .forEach instead of .some
    const hasClass = option.classList.contains('active');
    if (hasClass) {
      option.classList.remove('active');
    }

    return hasClass;
  })
}

function handleOptionSelected(e) {
  const newValue = e.target.textContent + ' ';
  const titleElem = document.querySelector('.single-title .title');
  titleElem.textContent = newValue;
  removeActive();
  e.target.classList.add('active')
}

.active {
  color: green;
}

<div class="single-select">
  <div class="single-title">
    <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
  </div>
  <ul id="single-select-dropdown">
    <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
  </ul>
</div>

Vanilla JS remove class from previous selection

3 Answers3

Demo

Linked