addClass and removeClass is not working correctly

Question

Sorry if this is an extremely simple question, but for some reason, I cant get this working.

What I'm trying to do is to add the activeButton class to each list item you click and remove the activeButton class to the list-item that had the activeButton class before the list-item was clicked.

Here is a code snippet of my problem

 $(document).ready(function () { $('.buttons').click(function () { $('.activeButton').removeClass('.activeButton'); $(this).addClass('.activeButton'); }); }); 

 .buttons { /*This is for decorative and visual purposes. So you can ignore the CSS for now.*/ display: inline-block; margin: 10px; } .activeButton { border-bottom: 1px solid black;/*I use border-bottom to provide underlines for my text. This allows the underline to be transitioned or animated*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="buttons activeButton">Link1</li> <li class="buttons">Link2</li> <li class="buttons">Link3</li> <li class="buttons">Link4</li> </ul> 

For the sake of clarification, I will explain my goal and the current problem.

GOAL: Once a list item is clicked, the class .activeButton will be added to the list item that was clicked and the JS will remove .activeButton from the list item that originally had the activeButton class.

PROBLEM: The attempted solution that I have coded does not work.

Answer 1

You don't need the class selector in the strings you pass to addClass() and removeClass() .

Update as follows:

$(function () {
    $('.postalProvider').click(function () {
        $('.activeButton').removeClass('activeButton');
        $(this).addClass('activeButton');
    });
});

Answer 2

Update :

$(document).ready(function () {
    var $buttons = $('.buttons');

    $buttons.click(function () {
        $buttons.removeClass('.activeButton');
        $(this).addClass('.activeButton');
    });
});

I think this is what you were after.

Answer 3

Like this you mean?

 $(document).ready(function () { $('.buttons').click(function () { $('.buttons').removeClass('activeButton'); // <-- remove from all .buttons class $(this).addClass('activeButton'); // <-- add to clicked link only }); }); 

 .buttons { /*This is for decorative and visual purposes. So you can ignore the CSS for now.*/ display: inline-block; margin: 10px; } .activeButton { border-bottom: 1px solid black;/*I use border-bottom to provide underlines for my text. This allows the underline to be transitioned or animated*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="buttons activeButton">Link1</li> <li class="buttons">Link2</li> <li class="buttons">Link3</li> <li class="buttons">Link4</li> </ul>