Delete the bitmap directly behind newly placed bitmap - AS3 - actionscript-3

Question

Tile-based map maker. I want to click the canvas, it places a tile, change tile, click the canvas and it replace the bitmap that I clicked on. .alpha shows clearly that all I am doing is stacking tiles... which will become a problem when I make a 2d array from it. I imagine that there's a way to make layers that they could sit on, but I haven't been able to find anything about it. Here's the code -
public function DrawATile(e:Event, tileToDraw:Object)
{
if (mouseXind <= 19 && mouseYind <= 14) //Only within the canvas!!
{
var newTile:Bitmap = new Bitmap(tileToDraw.Graphic);
newTile.x = mouseXind*32;
newTile.y = mouseYind*32;
newTile.alpha = .4;
addChild(newTile);
setChildIndex(newTile, this.numChildren-1); //Put this graphic behind the grid.
}
}
I want to delete the tile below the new tile that I place. I place a tile... I place a diferent tile over the old tile, I want the old tile to delete... not just stack tiles.

Answer 1

Sounds like you just need to keep track of the previous tile, then remove it accordingly:
private var curTile:Bitmap; //let's keep a reference to the current tile
public function DrawATile(e:Event, tileToDraw:Object)
{
if (mouseXind <= 19 && mouseYind <= 14) //Only within the canvas!!
{
//if there is a current tile, remove it from the display list
if(curTile){
removeChild(curTile);
}
//create your new one as usual
var newTile:Bitmap = new Bitmap(tileToDraw.Graphic);
newTile.x = mouseXind*32;
newTile.y = mouseYind*32;
newTile.alpha = .4;
addChild(newTile);
setChildIndex(newTile, this.numChildren-1); //Put this graphic behind the grid.
curTile = newTile; //make the current tile the one just created
}
}
EDIT
Based off you comment, this seems more like the solution you're looking for.
Sounds like you just want the tile to go away when clicked.
private var curTile:Bitmap; //let's keep a reference to the current tile
public function DrawATile(e:Event, tileToDraw:Object)
{
if (mouseXind <= 19 && mouseYind <= 14) //Only within the canvas!!
{
var newTile:Bitmap = new Bitmap(tileToDraw.Graphic);
newTile.x = mouseXind*32;
newTile.y = mouseYind*32;
newTile.alpha = .4;
addChild(newTile);
setChildIndex(newTile, this.numChildren-1); //Put this graphic behind the grid.
//add a click listener to delete this tile when clicked
newTile.addEventListener(MouseEvent.CLICK, deleteTile, false, 0 true); //make sure the event listener has a weak listener
}
}
private function deleteTile(e:Event):void {
var tile:Bitmap = e.currentTarget as Bitmap;
if(tile.parent) tile.parent.removeChild(tile);
}

Answer 2

I pushed it all into an array, with placeholder strings for every unoccupied cell. Then I check if the index at my current mouse position is a DisplayObject and remove it if it is, replacing it with the new tile.
public function DrawATile(e:Event, tileToDraw:Object)
{
if (mouseXind <= 19 && mouseYind <= 14) //Only within the canvas!!
{
if(aarray[mouseYind][mouseXind] is DisplayObject)
{
removeChild(aarray[mouseYind][mouseXind]);
}
var newTile:Sprite = new Sprite();
var bmp:Bitmap = new Bitmap(tileToDraw.Graphic);
newTile.addChild(bmp);
newTile.x = mouseXind*32;
newTile.y = mouseYind*32;
addChild(newTile);
aarray[mouseYind][mouseXind] = newTile;
}
}