Selectively add/remove class with JS

Mark, simply fantastic. Hope one day I will have a chance to buy you a beer (or two)! Thank you very much! Posting the complete snippet for newbies like me for future use (remember you can use this with ANY kind of CSS class)…

var thisScale = $( element ).closest('.Gruppe')[0].querySelector(".scale-transition");
    
if (! $( thisScale ).hasClass( "scale-out" )){
    $( thisScale ).addClass( 'scale-out' );
    } else {
    
     thisScale.classList.remove('scale-out')
    
    }

     $( ".scale-transition" ).each(function( index ) {

 if ( $( this ).attr('id') != $( thisScale ).attr('id')) {
 
 
 if (! $( this ).hasClass( "scale-out" )){
 console.log($( thisScale ).attr('id'))
 $( this ).addClass( 'scale-out' );
 
}  

}
 
});
2 Likes

@MarkHunte Sorry for asking again Mark,

I am trying reuse your code somewhere else. Basically for a pretty simple menu. I have a group with classname "mgroup" and inside some menu item divs with a class "mb" assigned. I am using than this script on klick on the menu items:

$( ".mb" ).each(function( index ) {

    if (! $( this ).hasClass( "blue-grey" )){
$( this ).addClass( 'blue-grey' );
}       
  
});
  $( element ).closest('.mgroup')[0].querySelector(".mb").classList.remove('blue-grey')

I think that my problem is around

$( element ).closest

Was trying with parents and each but this will fail also.... :rage:

If you (or one of you guys) have a chance to take a look at the project... (it is nothing urgent that I need).

THANKS!

menu.hype.zip (117.0 KB)

I will have to start Charging you… :wink:

$( ".mb" ).each(function( index ) {

        if (  $( this ).hasClass( "blue-grey" )){
      $( this )[0].classList.remove('blue-grey') 
    }       
      
    });
    
      $( element ).addClass( 'blue-grey' );

And BANG! Mark did it again :heart_eyes: I have wrote you a PM…:sunglasses: