.addClass to only the bullet being clicked on in unordered list

Question

I have a short unordered list with two bullets.

I added some Javascript, so that when I bullet is clicked on, it adds a class to it.

The problem is, it adds the class to all existing li's, not just the one I clicked on.

Here is the JSFiddle: http://jsfiddle.net/4sa8T/

Javascript:

$("#items li a").click(function(){

$("#items li").addClass("newClass");

});

html:

<div id="content">
    <ul id="items">
    <li><a href="#">Hello</a></li>
    <li><a href="#">Bye</a></li>    
    </ul>
</div>

Answer 1

$("#items li a").click(function(){
    $("#items li").addClass("newClass");
});

should be

$("#items li a").click(function(){
    $(this).parent().addClass("newClass");
});

$(this).parent() would refer to the specific li element, and $('#items li') refers to all li s under #items

Answer 2

The best solution for you is using:

$(this).toggleClass('newClass');

dollar this indicates using the specific clicked element...

toggleClass is an easy way to remove the added class by clicking the element again.

here is a demo jsfiddle