如何从其他部分删除活动 class

Question

    const addActiveClass = () => {

    if( isInViewport(section) ) {

      section.classList.add('active-section');

      // How to remove the 'active-section' from other sections

    }

  }

}

what is the code should be written to remove active class from other section? In jQuery this may be easy but what about pure js?

Answer 1

Well, you question is a bit confusing because there is no context.

The simplest approach would be to have an array or a node object with all your sections. Then loop through theses sections with a for loop to remove the active class from the one you want?

For example here I have 3 sections. I want every section to have the section--active class when I click on it. But I also want that only one at the time can have the section--active class:

<div class="section section--1 section--active"></div>
<div class="section section--2"></div>
<div class="section section--3"></div>

In javascript I will get them in a node object (kind of array):

const sections = document.querySelectorAll('.section')

Then I can bind click event to each section:

sections.forEach(section => {
  section.addEventListener('click', () => {

    // I loop again to remove the 'section--active' from all others sections
    // To avoid confusion, I use 'el' as a name for each section in sections
    sections.forEach(el => el.classList.remove('section--active'))

    // Then I add the 'section--active' to the clicked element
    section.classList.add('section--active')
  })
})

Answer 2

You'll need to first loop over all the elements that have the active-section class with document.querySelectorAll(".active-section") and use classList.remove() . Then, once all elements have had that class removed, add it back to just the current element in question.

Something along these lines:

const addActiveClass = () => {

  if( isInViewport(section) ) {
    // Loop over all the elements that are active
    document.querySelectorAll(".active-section").forEach(function(item){
      item.classList.remove('active-section'); // Remove the class
    });

    // Then add it to the current element
    section.classList.add('active-section');
  }
}