How to remove class before leaving a element in jQuery

Question

I want to develop some lists in Bootstrap 3.

I have used this code for that-

HTML-

<ul class="list-group">
    <li class="list-group-item">
        <div>
            <div>
                Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
            </div>
            <div>
                More thing
            </div>
        </div>
    </li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

CSS-

.list_selected
{
    background: #AFAF93 !important;
}

JavaScript using jQuery-

//Selected
    var previous_selected;
    $("li.list-group-item").click(function()
    {
        try
        {
            previous_selected.removeClass( "list_hover" );
        }
        catch(e)
        {
            console.log(e);
        }
        $(this).addClass( "list_selected" );
        previous_selected=$(this);
    });
//End

So that I have a output like it-

After clicked on second Item-

.

And after clicked on 3rd item after that-

But I am getting output like it-

.

So, previously selected item tag is not removed perfectly.

Can anyone help please?

Thanks in advance for helping.

Answer 1

Try this.

$("li.list-group-item").click(function()
  {
    if($('.list-group-item').hasClass('list_selected')){
        $('.list-group-item').removeClass('list_selected');
    }
    $(this).addClass('list_selected');
});

Answer 2

You are removing the wrong class from the previous element

var previous_selected;
$("li.list-group-item").click(function () {
    if(previous_selected){
        previous_selected.removeClass("list_selected");
    }
    $(this).addClass("list_selected");
    previous_selected = $(this);
});

---

If all those target li elements are siblings then you can use

var $items = $("li.list-group-item").click(function () {
    $(this).addClass("list_selected").siblings('.list_selected').removeClass("list_selected");
});