CODEWITHSUNDEEP
jqueryhtml
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

How to remove a class from all sublings using jquery?

I want to add an 'active' class of clicked <li> link and remove all 'active' class from siblings.

I tried as follows: 

$(document).ready(function(){
 $('#account-settings').on('click',function(){
    $(this).addClass('active').siblings().removeClass('active');
 });
});

It adds 'active' class to clicked item but not remove 'active' from siblings.

Snippet:

$(document).ready(function() {
  $('#account-settings').on('click', function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
  <li class="active" id="account-overview">
    <a href="javascript:void(0)">
      <i class="icon-home"></i> Overview </a>
  </li>
  <li>
    <a href="javascript:void(0)" id="account-settings">
      <i class="icon-settings"></i> Account Settings </a>
  </li>
  <li>
    <a href=" /demo-home19/resellers/logout">
      <i class="icon-settings"></i> Logout </a>
  </li>

</ul>

Upvotes: 0

Views: 53

Answers (3)

GunJan Mehta
GunJan Mehta

Reputation: 312

You may try doing

$('.nav').children('li').on('click',function(){
  $('.nav').children('li').removeClass('active');
  $(this).addClass('active');
});

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

try:

  $('#account-settings').on('click',function(){
       var li = $(this).parent('li')
        li.parent().find('li').removeClass('active');
        li.addClass('active');

     });

or:

 $('#account-settings').on('click',function(){
       var li = $(this).parent('li')
        li.siblings().removeClass('active');
        li.addClass('active');

     });

or 

 $('#account-settings').on('click',function(){
       $(this).parent('li').addClass('active').siblings().removeClass('active');
     });

Upvotes: 1

coder
coder

Reputation: 701

Use this instead of id #account-settings

$('ul li').on('click',function(){....
....

Upvotes: 1

Related Questions