Multi-page menu system

programming flash
1

I am building a multi-page menu system. When the page changes it loads a different xml file.

However, when the page changes it not only loads the new file, but it continues to display the previous xml file, and so it ends up looking very messy (especially after changing page many many many times!)

Could someone offer advice (or working code) on how to remove the list and replace with the new list successfully?

I hope that all makes sense :stare:

Thanks for any help with this!

 
var xmlPath:String = "\main1.xml";
var settingsXML:XML;
 
var loader = new URLLoader();
loader.load (new URLRequest(xmlPath));
loader.addEventListener (Event.COMPLETE, xmlLoaded);
function xmlLoaded (e:Event):void {
 if ((e.target as URLLoader) != null ) {
  settingsXML = new XML(loader.data);
  settingsXML.ignoreWhitespace = true;
  createMenu ();
 }
}
 
function createMenu ():void {
 var menuItem:MenuItem;
 var i:uint = 0;
  
 for each (var link:XML in settingsXML.links.link) {
  if (i<26)
  {
  menuItem = new MenuItem();
  menuItem.menuLabel.text = [EMAIL="link.@name"]link.@name[/EMAIL];
  menuItem.linkTo = [EMAIL="link.@file"]link.@file[/EMAIL];
  
  menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;
  
  if (i<=12)
   {
    menuItem.x = 100;
    menuItem.y = 170 + i*40;
   }
  
  else if ((i>=13) && (i<=25))
   {
    menuItem.x = 550;
    menuItem.y = 170 + (i-13)*40;
   }
   
  menuItem.buttonMode = true;
  menuItem.mouseChildren = false;
  menuItem.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
  menuItem.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
  menuItem.addEventListener (MouseEvent.CLICK, mouseClicked);
  
  addChild (menuItem);
  i++;
  
  }
  
  else if (i>=26)
  {
   trace("There are too many list items - please add a new page")
  }
 }
}
function mouseOverHandler (e:Event):void {
 buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 1, 1, true);
 buttonTween = new Tween(e.target, "scaleY", Elastic.easeOut, 1, 1, 1, true);
}
function mouseOutHandler (e:Event):void {
 
 buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);
}
function mouseClicked(e:Event):void {
 
 var targetURL:String = e.target.linkTo;
 var urlRequest:URLRequest = new URLRequest(targetURL);
 navigateToURL(urlRequest);
}