Event bubbling eventListener to remove/add class on target is not removing class

Question

I am trying to add a class .active if the target element does not have that class, and if another element has that class I want to remove that class so only that class I clicked on has that element. I am trying to do this with this code -

document.addEventListener('click',function(e){
    document.querySelector('.active').classList.remove('.active');
    if(!e.target.classList.contains('active') && e.target.classList.contains('day')){
        e.target.classList.add('active');
    }
 });

I expect that whatever has the .active class to be removed when I click on another element, but instead when I click on another element the active class remains on the element that already had the active class and it is added onto the target that I clicked on. I have no errors in my console.

Answer 1

It has to be

document.querySelector('.active').classList.remove('active')

not

document.querySelector('.active').classList.remove('.active')

As you already told the browser it's about CSS classes (classList), you no longer prefix the class you specify with a ..