Remove List Items From Select Menu With Jquery

I have a tiny bit of script that allows the user to resize the window to convert an unordered list into a select menu. However, I'd like to remove any nested unordered lists from t

Solution 1:

targeting nav a will find all its children and even children of children, so you need to directly target them like this

$("nav > ul > li > a").each(...

http://jsfiddle.net/k7272/1/

Solution 2:

Change the selector to only look for direct children, this will avoid the nested ul. Try this:

$("nav > ul > li > a").each(function () {
    // your code...
});

Updated fiddle

Solution 3:

Instead of the "nav a" selector, which selects any descendant of , use the child operator: $("nav>ul>li>a").

Better yet, put a class on your top level ul and then use $('ul.classname>li>a'), then you can move the whole list around your DOM and still have the selector work.