Menu
I have a simple <ul> with an id. I would like an onclick even to clear all the classes set in its child <li> elements.
I can get it to work in the first function clearclass_works() but I dont want to be tied to any id naming convention.
So the question is, how do I get get the id of the child elements. Or do I even have to get the child ids or can I clear all the children classes if I simply know the parent <ul> id?
clearclass() alert does have the node.nodeName as LI and it alerts once for each LI so I guess I’m close. I thought this seemed logical this.className=”; but no joy :/
[code=html]
<html>
<head>
<style type=”text/css”>
.blue {
background-color:#0000ff;
width:100px;
}
.red {
background-color:#ff0000;
width:100px;
}
.green {
background-color:#00ff00;
width:100px;
}
</style>
<script type=”text/javascript”>
<!–
function clearclass_works(id){
if(theList = document.getElementById(id)) {
var listItems = theList.getElementsByTagName(‘li’);
for(var i = 0; i < listItems.length; i++) {
document.getElementById(id+i).className=”;
}
}
}
function clearclass(id){
var listItems = document.getElementById(id);
for(var i = 0; i < listItems.childNodes.length; i++) {
node = listItems.childNodes[i];
if (node.nodeName==”LI”) {
alert(node.nodeName);
this.className=”;
}
}
}
//–>
</script>
</head>
<body>
<ul id=”who”>
<li id=”who0″ class=”blue”>blue</li>
<li id=”who1″ class=”red”>red</li>
<li id=”who2″ class=”green”>green</li>
</ul>
<span onclick=”clearclass_works(‘who’)”>click me you will</span>
<br /><br />
<span onclick=”clearclass(‘who’)”>stop trying to click me and click me</span>
</body>
</html>
The problem I actually trying to solved is to clear a single class that might (or might not) be set on a single li.