如何删除窗口宽度的类列表-Jquery / Javascript

Question

Can someone help me optimize this Jquery to remove a list of classes from the DOM? The code that I have works, but there must be a way to do this without having to list each class individually.

jQuery(document).ready(function($){
   if(window.innerWidth <= 960) {
      $('.wow').removeClass("wow");
      $('.animated').removeClass("animated");
      $('.bounceInDown').removeClass( 'bounceInDown' );
      $('.slideInLeft').removeClass( 'slideInLeft' );
      $('.slideInRight').removeClass( 'slideInRight' );
      $('.zoomInUp').removeClass( 'zoomInUp' );
   }
});

Answer 1

You could list all classes into a single selector and remove all classes at once, like $('.animated,.bounceInDown,.slideInLeft,.slideInRight,.zoomInUp').removeClass('animated,bounceInDown,slideInLeft,slideInRight,zoomInUp'); , but this will remove all of listed classes for each of the selected elements, which might not be what you want to accomplish.

You could use Array.prototype.forEach like:

["animated", "bounceInDown", "slideInLeft", "slideInRight", "zoomInUp"].forEach(function (e) {
  $('.' + e).removeClass(e);
});

Answer 2

You could try extending jQuery:

$.fn.classGoByeBye = function(){
    var selector = this.selector.replace('.', '');
    $(this).each(function(){
        this.classList.remove(selector);
    });
};

//usage:
$('.wow').classGoByeBye();

Answer 3

One possible solution would be to place your list of classes in an array and then iterate over them within your condition. For example...

if (window.innerWidth <= 960) {
    $.each(['wow', 'animated'], function(index, value) {
        $("." + value).removeClass("." + value);
    });
}