Loading next photo keeps previous on stage

1

Greetings once more.

Been fiddling around with AS 3 once more and i have this issue.

I got a mc on stage named imageArea

each next or previous click triggers function that increments the xml node plus some extras and then does the loadImage function.

when i click next image the correct image loads, but the previous one is still in the display.
how i prevent that please?


var imageLoader:Loader;
function loadImage (url:String):void
{
    // Set properties on imageLoader object
     imageLoader = new Loader();
    imageLoader.load (new URLRequest(url));
    imageLoader.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, imageLoading);
    imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, imageLoaded);
}

function imageLoaded (e:Event):void
{
    // Load Image is completed.
    imageArea.x = (stage.stageWidth/2) - imageArea.loc[0];
    imageArea.y = (stage.stageHeight/2) - imageArea.loc[1];
    imageArea.addChild (imageLoader);
}
loadImage ("myimage.jpg");

many thanks