Событие пузыря EventListener для удаления / добавления класса на цель не удаляет класс

Question

Я пытаюсь добавить класс .active, если целевой элемент не имеет этого класса, и если другой элемент имеет этот класс, я хочу удалить этот класс, чтобы только тот класс, на который я нажал, имел этот элемент. Я пытаюсь сделать это с помощью этого кода -

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');
    }
 });

Я ожидаю, что все, что имеет класс .active, будет удалено, когда я щелкаю по другому элементу, но вместо этого, когда я щелкаю по другому элементу, активный класс остается на элементе, который уже имел активный класс, и добавляется в цель что я нажал на. У меня нет ошибок в моей консоли.

Answer 1

Должно быть

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

не

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

Как вы уже сказали браузеру, что это классы CSS (classList), вы больше не указываете префикс класса, который вы указываете ..