How to remove a class of all sibling elements when an element is clicked inside a jquery each loop

Question

I am looping over a group of elements with the same class. Now when an element is clicked I need it to get a class that makes it active and adds some css to it. This works but it stays forever, so if I click 4 elements I have 4 active elements.

I'm trying to remove the class from all sibling elements when 1 is clicked but below code does not work for some reason:

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok');
             $(this).siblings().removeClass('activeblok');
     });
    });

I've also tried:

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok').siblings().removeClass('activeblok');
     });
    });

Why doesn't it work? The class is added when I click, but for the siblings nothing is removed.

My HTML if that helps:

    
      
        
        Bezorgen
      
    
    
      
        
        Bestellen
      
    
    
      
        
        Betalen
      
    
    
      
        
        Bestanden uploaden
      
    
    
      
        
        Garantie en reparatie
      
    
    
      
        
        Account

user_383904 · Answer

Since your elements are not siblings, cache them first

(No need to use .each() jQuery operates over collections already)

Use your cached Elements instead of .siblings()

Make use of .not(this) to filter-out the current one

const $blokje = $('.klantenblokje'); // Cache your elements

$blokje.on("click", function(e) {
    e.preventDefault();
    // var id = $(this).attr('id');
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
});

.activeblok { background: fuchsia; }


  
    
    Bezorgen
  


  
    
    Bestellen
  


  
    
    Betalen
  


  
    
    Bestanden uploaden
  


  
    
    Garantie en reparatie
  


  
    
    Account

user_13897282 · Answer

.siblings() selects elements in single parent. All your elements have different parents. That's why you can't use .siblings() in this case.

But you may use something like:

$('.klantenblokje').removeClass('activeblok');
$(this).addClass('activeblok');

How to remove a class of all sibling elements when an element is clicked inside a jquery each loop

2 Answers