CODEWITHSUNDEEP
javascripthtmldom
Faiz Hameed
Faiz Hameed

Reputation: 544

How to remove a previously toggled class when we toggle another class by click event

I dont use Jquery and dont want to , I wanted to toggle a class again once next item is toggled with same class. so the class from previous one is removed. and only one class is toggled on at a time.

I tried adding document.getElementsByClassName(".panel").removeClass("open"); to the function to first remove all toggled class('open') but that doesnt work. i tried adding an id and trying to remove a class from that id still doesn't work

function toggleOpen() {

     document.getElementsByClassName(".panel").removeClass("open");//this give me error
      this.classList.toggle('open');


    }
    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }

    }



    const panels = document.querySelectorAll('.panel');
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

Result

Uncaught TypeError: document.getElementsByClassName(...).removeClass is not a function

Upvotes: 0

Views: 361

Answers (3)

Jitender Kumar
Jitender Kumar

Reputation: 1

try this to remove previous class from link

const navLinks = document.querySelectorAll('ul li a');

function removeActiveClass() {
  navLinks.forEach((val)=>{
    val.parentNode.classList.remove('active-nav');
  })
}

navLinks.forEach((val)=>{
  val.addEventListener('click', ()=>{
    removeActiveClass();
    val.parentNode.classList.add('active-nav');
  })
})

Upvotes: 0

spd
spd

Reputation: 38

It should be classList.remove("open"), not removeClass("open")

Also, it wouldn't work because getElementsByClassName would return a collection of elements, and you can't remove the class from them all at once. You'd have to call it for each element in the panel.

Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))

Or without turning it to an array first you can do 

const panels = document.getElementsByClassName(".panel")
for (let panel of panels) {
  panel.classList.remove("open")
}

Upvotes: 1

Priyesh Kumar
Priyesh Kumar

Reputation: 2857

Since you are adding event listener to each element, document.getElementsByClassName(".panel").removeClass("open"); is not required. this inside the function will refer to clicked element.

removeClass is jquery method, which will not be available. document.getElementsByClassName returns list of elements, so you need to loop over it.

Try following example.

function toggleColor() {
      this.classList.toggle('red');
}


const panels = document.querySelectorAll('.panel');
panels.forEach(panel => panel.addEventListener('click', toggleColor));
.green {
  color: green;
}
.red {
  color: red;
}
<p class="panel green">H1<p>
<p class="panel red">H2<p>
<p class="panel green">H3<p>
<p class="panel  red">H4<p>

Upvotes: 1

Related Questions