How To Reset An Ajax Generated Menu?

[TOA]

I made an ajax menu, It's three levels deep and fills each level's content with content based on the previous choice. Pretty plain and simple, works fine.

 

I've found one issue, and that is: when I change the first level again (without a full page refresh) the third level menu stays on screen. To clarify..the second level menu option does correctly alter itself, but the third level stays there. This also happens if there's more than three levels of menus and will leave anything after.

 

Man I hope that makes sense!

 

I have limited experience with this so my question is: how do I add something to reset/clear anything after the one that's changed?

 

Here's my function that does the lifting. (I've also attached the entire current script with php and all)

 

<script type="text/javascript">
function changeContent(str, id, param)
{
if (str=="")
{
// if blank, we'll set our innerHTML to be blank.
document.getElementById(id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
 // create a new XML http Request that will go to our generator webpage.
 xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
 // create an activeX object
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// on state change
xmlhttp.onreadystatechange=function()
{
// if we get a good response from the webpage, display the output
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
 document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
// use our XML HTTP Request object to send a get to our content php.
xmlhttp.open("GET","ajax-menu-4.php?"+param+"="+str, true);
xmlhttp.send();
}
</script>

 

Thanks for reading.

ajax-menu-4.php

[TOA]

So I found that if I change it to the code below, it will overwrite the third menu to nothing, but there's an issue in that in doesn't 'collapse' the div. It leaves a blank space where the menu was previsouly, then if you refresh it collapses and is what I'm expecting.

 

 

if (xmlhttp.readyState==4 && xmlhttp.status==200){
if (id == 'categories')
{
 document.getElementById('modules').innerHTML=""; // essentially just write it back to nothing
}
document.getElementById(id).innerHTML=xmlhttp.responseText;
}

 

I suppose it's not a huge deal, but it bugs the ocd side of me. There has to be a better/more efficient way..