How can add class "Active" on click of an li element and remove it from others at the same time?

Question

I am trying to create a menu in which I want to change the CSS of an li element on click while at the same time, CSS of other li's should remain the same.

My menu is:

    <ul id="menu">
    <li><a href="#">Parent 1</a> </li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">non-link item</a></li>
    <li><a href="#">Parent 2</a> </li>
</ul>

and my jquery to add CSS to the selected element is:

 $("#menu li a").click(function() {
    $(this).parent().addClass('selected');

    });

However, right now, I am unable to remove the added CSS from a non-selected element. Is there anyway I can implement this?

Answer 1

Try this

$("#menu li a").click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');

    });

DEMO

Answer 2

Try this

$("#menu li a").click(function() {
  $("#menu li").removeClass('selected');
    $(this).parent().addClass('selected');
});

DEMO