Vanilla Js Remove Class From Previous Selection

Im working with this part of code

User answear

Solution 1:

1. Wrap the callback in an anonymous function:

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

2. 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);
  });
});

functionhandleOptionSelected(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)
}

<divclass="single-select"><divclass="single-title"><pclass="title">User answear</p><imgsrc="../resources/chevron-down.svg"alt=""></div><ulid="single-select-dropdown"><liclass="option"id="option1">answear 1 <imgsrc="../resources/checkmark.svg"alt=""></li><liclass="option"id="option2">answear 2 <imgsrc="../resources/checkmark.svg"alt=""></li><liclass="option"id="option3">answear 3 <imgsrc="../resources/checkmark.svg"alt=""></li></ul></div>

Solution 2:

Add this to your code

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

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

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

Solution 3:

You have to iterate and remove the active class

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

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

functionremoveActive() {
  [...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 .someconst hasClass = option.classList.contains('active');
    if (hasClass) {
      option.classList.remove('active');
    }

    return hasClass;
  })
}

functionhandleOptionSelected(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;
}

<divclass="single-select"><divclass="single-title"><pclass="title">User answear</p><imgsrc="../resources/chevron-down.svg"alt=""></div><ulid="single-select-dropdown"><liclass="option"id="option1">answear 1 <imgsrc="../resources/checkmark.svg"alt=""></li><liclass="option"id="option2">answear 2 <imgsrc="../resources/checkmark.svg"alt=""></li><liclass="option"id="option3">answear 3 <imgsrc="../resources/checkmark.svg"alt=""></li></ul></div>

Share