How to remove the class when the screen width changes to jQuery?

[Saumya]

I have a menu that opens when you press the button, and I also close. Also, with the help of a media request, it was made that when the screen was changed, the menu would be hidden. I mean, if the screen width is more than 800px, the menu gets "display: none;"

But if the menu was open, it won't close, it'll just get "display: none;" At the time of transition from 801px to 800px and below, it appears immediately open as the display becomes flex.

To fix this, we need to make sure at the time of transition from 800px to 801px and more, the cement doesn't just get "display: none;And you need to remove the class from the element. How do you do that?

@media (min-width: 801px) {
  .mobile-menu-active {
    display: none;
  }
}

const mediaQueryMin = window.matchMedia('(min-width: 800px)')
if (mediaQuery.matches) {

navButton.on('click', function(e){

e.stopPropagation();

mobileMenu.toggleClass('mobile-menu-active');

$('.burger-menu--close').toggleClass('burger-menu--close-active')

$('.burger-menu--menu').toggleClass('burger-menu--menu-disable')

});

} else {

mobileMenu.removeClass('mobile-menu-active');

}

And that's the code I wanted to remove the class, but somehow it doesn't work:

function menuRemoveClass() {

if($(window).width() > 800) {

$('.mobile-menu').removeClass('.mobile-menu-active');

}

}

$(window).resize(function(){

menuRemoveClass();

})

[Avante]

I thought it was...

function menuRemoveClass() {
  if($(window).width() > 800) {
    $('.mobile-menu').removeClass('mobile-menu-active');
    $('.burger-menu--menu').removeClass('burger-menu--menu-disable')
    $('.burger-menu--close').removeClass('burger-menu--close-active')
  }
}
$(window).resize(function(){

menuRemoveClass();

})

I didn't remove the point, and for the right job, I deleted the classes from the button. Looks like it's working now, but you might have better judgments.