Javascript - add class to element, remove from siblings

Question

Code is very basic (you can get the idea when you look at it, no need to explain), somehow it doesn't work... can anyone please tell me what am i doing wrong?

 $("ul li").click(function() { $(this).addClass('cell-selected') .parent().siblings().find('.cell-selected').removeClass('cell-selected'); }); 

 .cell-selected { color: #fff; background: #5b2200; border-color: #ce5209; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul> <li class="cell-selected"><a>First</a></li> <li><a>Second</a></li> <li><a>Third</a></li> </ul> 

fiddle

Answer 1

$("ul li").click(function() {

  $(this).addClass('cell-selected')
      .siblings().removeClass('cell-selected')
});

You are looking siblings of selected li .So,no need of parent() and find('.cell-selected').

Answer 2

You can try with it:

 $("ul li").click(function() {
        $(this).addClass('cell-selected').siblings().removeClass('cell-selected');
 });