Removing class from unordered list using jQuery

Hi Damien,

Thank you for your help. Your suggestion of

$('#nav-main li.advancedSearch').remove();

is actually what I was looking for. I believe I misunderstood the problem and only realised now with your solution. Am I right in thinking that even if you remove the class from an item it will still appear on the page? Because I actually wanted to remove the item altogether, so that the 'Advanced Search' text is actually removed. Not just the class.

You are correct, I had a feeling you were wanting to remove the element altogether but wanted to answer the 'removeClass' question first. Glad to help. :)

Ok great thanks. Where does .html() come into this? Is it used to only add elements and not remove them?

'.html()' is more of an injection of html, replacing the elements content. Every element can have text or html inside it, so if you had a 'div' and wanted to put a paragraph tag in it you could inject the html for that straight into the 'div', replacing what was there.

<div id="myDiv">This is the <strong>old</strong> content</div>

$("#myDiv").html('Replaced with <strong>new</strong> html!!');
// --> <div id="myDiv">Replaced with <strong>new</strong> html!!</div>

In the instance below (from your code), it is replacing all html inside '#nav-mobile' with the html from '#nav-main'.

// jQuery
$("#nav-mobile").html($("#nav-main").html());

// Javascript  -- a bit more verbose, but it is doing this:
document.getElementById("nav-mobile").innerHTML = document.getElementById("nav-main").innerHTML;

More specifically I want to have the 'Advanced Search' item removed only when the mobile nav is expanded. Otherwise it wants to be present. How would I do this? Currently this is my code:

$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
            $('.advancedSearch').html();
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
            $('.advancedSearch').remove();
        }
    });
});

However when I close the mobile nav and go back to the nav main, the Advanced Search item is no longer present.

Cheers for any help.

Ok, rather than removing it, sounds like you just want to hide it. If you remove it, you would have to add it again. Easiest way would be to create a class that maybe has 'display:none;' which gets added or removed from that element, you can use jQuery.toggleClass() for this. Something like:

.hideAdvanced    { display:none; }

$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
            $('.advancedSearch').toggleClass("hideAdvanced");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
            $('.advancedSearch').toggleClass("hideAdvanced");
        }
    });
});

Hmm the toggleClass option doesn't seem to be working. Do you have any thoughts on how I can add .advancedSearch to the html if the mobile nav doesn't have the class 'expanded?' I'm guessing it's essentially, the opposite of .remove();?

Sorry Gabriel, I think I'm confused which probably doesn't help. Do you have 2 navigation items? One which is for desktop and one for mobile, if so why not just use one and style it?

Hi Damien,

Yes I have a main nav, which displays at 900px+ and then under 900px a menu button appears. On the click of the button the items on the main nav appear in a drop down menu. I want the advanced search to appear on the main nav at 900+ but to not appear at 900-

So it's a case of adding and removing it.

HI Damien,

So I'd tried media queries before, and I tried your suggestion here. Your suggestion as well as my previous attempts didn't work. But your suggestion got me thinking and I came up with an answer.

#nav-mobile li.advancedSearch { 
        display: none; 
}

#nav-main li.advancedSearch { 
        display: inline-block; 
}

Also, I came up with a jQuery solution as well. And it's so simple I can't believe it took me so long to come up with.

$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $('#nav-mobile').addClass('searchBar');
            $(this).removeClass("open");
            $('.advancedSearch').show();
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
             $('.advancedSearch').hide();
        }
    });

Really appreciate your time and help.

No problems, but I'm still a bit confused, it looks like you have two complete navigation elements or am I misreading it?

Probably doesn't help I'm only seeing snippets of the solution, but is the '#nav-mobile' an exact copy of '#nav-main'? I was thinking you would just manipulate the look of the main to suit mobile layout rather than duplicating.

Either way, glad you've got it working. :)

You can see where I'm coming from with this tutorial

http://callmenick.com/_development/simple-responsive-navigation/

Basically the #nav-main is attached to the #nav-mobile, and it's in the form of a dropdown menu.