CODEWITHSUNDEEP
jquery
woj_jas
woj_jas

Reputation: 1088

How to remove active class from element set by jquery

I'm having issue with adding active element and removing it onclick action. I'm taking li and a items from cms by smarty, in html it's someghing like this:

<li class="arrow-right text-center">Lorem Ipsum</li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>

I'm setting first element active by jQuery and trying to remove it by .click function , after i click i have first and clicked element active only to refresh , after page refresh only first element is active sample: 

$(".list-group-item:first").addClass("active");
$(document).ready(function(){
    $(".list-group-item:first").addClass("active");
    $('.list-group-item').click(function() {
        $(".list-group-item:first").removeClass("active");
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
});

I'm 100% sure that problem is first line of code because it's repeating always with document.ready function. I'm asking because I'm not expert and don't know how to check that first element was active and how to make it active after i go back to that li element after few clicks.

I tried 

$(".list-group-item").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});

It's not working

Upvotes: 0

Views: 4129

Answers (2)

Hamit YILDIRIM
Hamit YILDIRIM

Reputation: 4549

I used below selectors add and removes

$(document).ready(function () {
    $("[name='Status']").css("display", "none");  //==> find by name
    $("label[for='Status']").css("display", "none"); //==> find by for
});

$("#f1").bind("click", (function () {
    $(".select-airport").removeClass("active"); //==> remove by class name
    $(this).children('a').addClass('active'); //==> add to children
    $('#Status').val(1);
    $("#Status").trigger("change");

    }));

All above right, I often need this things in jquery and want to share

Upvotes: 0

Warrenn enslin
Warrenn enslin

Reputation: 1036

When you click the link the page is going to redirect to the href url of the a tag if it happens to be the same page then the same code will execute making the same li active. You are going to want to either cancel the the event from firing or change the html page that gets rendered to the client.

how to make it active after i go back to that li element after few clicks.

sounds like you might want to use something like the HTML 5 history, to do deeplinking especially if you are going to be using href and redirects. If that's the case you should look at some jquery history plugins like jquery history plugin, history, and jQuery BBQ If all you want to do is change the active class to the latest clicked li element I would do this instead.

$(document).ready(function(){
    $('li:first').addClass('active');
    $('li').click(function() {
        $("li.active").removeClass("active");
        $(this).addClass('active');
    });
});

since your html in the question didn't have the any list-group-item classes I suggested a jquery selector of $('li') but if the li elements have the list-group-item class you could use 

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

or 

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

instead.

Upvotes: 1

Related Questions