removeChild is removing all my Movie clips - actionscript-3

Question

I am making a tool which obscures an image with squares. What I want to happen is to have a bouncing ball which hits the squares and makes them disappear. However, the removeChild command isn't working right. I set it up to populate the image with empty movie clips and colorize them. However, when I click the square, I am running into problems with the parent/child. I keep running into this error. "The supplied DisplayObject must be a child of the caller." I cannot think of a good way to assign the eventListeners to each individual squares. I'm sure it is obvious. Here is my code. Thank you in advance
EDIT:If I get it to work, it deletes all instances of the square, not just the one I clicked.
Here is my code
var mc:MovieClip = bgIMG;
var bd:BitmapData = new BitmapData(mc.width,mc.height);
bd.draw(mc);
var _img:Bitmap = new Bitmap(bd);
var _imgNodes:Array = [];
var _tiledImg:MovieClip = container_tiled_img;
var pad:int = 0;
var rows:int = 10;
var cols:int = 10;
var zero:Point = new Point();
createImgNodeGrid(rows, cols, pad);
pixelateNodes(_imgNodes);
function removeMC(e:MouseEvent)
{//removes the movie clip
trace(e.currentTarget.x);
stage.removeChild(e.currentTarget.parent.parent);
}
function pixelateNodes(nodes:Array = null):void
{
for each (var node:Bitmap in nodes)
{
node.bitmapData.fillRect(node.bitmapData.rect, avgColor(node.bitmapData));
}
}
function avgColor(src:BitmapData):uint
{
var A:Number = 0;
var R:Number = 0;
var G:Number = 0;
var B:Number = 0;
var idx:Number = 0;
var px:Number;
for (var x:int = 0; x < src.width; x++)
{
for (var y:int = 0; y < src.height; y++)
{
px = src.getPixel32(x,y);
A += px >> 24 & 0xFF;
R += px >> 16 & 0xFF;
G += px >> 8 & 0xFF;
B += px & 0xFF;
idx++;
}
}
A /= idx;
R /= idx;
G /= idx;
B /= idx;
return A << 24 | R << 16 | G << 8 | B;
}
function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
{
var w:Number = _img.width / rows;
var h:Number = _img.height / cols;
var numNodes:int = rows * cols;
_imgNodes = [];
var nodeCount:int = 0;
for (var i:int = 0; i < rows; i++)
{
for (var j:int = 0; j < cols; j++)
{
// get area of current image node
var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);
// copy bitmap data of current image node
var tempBd:BitmapData = new BitmapData(w,h,true);
tempBd.copyPixels(_img.bitmapData, sourceRect, zero);
// place image node bitmap data into sprite
var imgNode:Bitmap = new Bitmap(tempBd);
imgNode.x = i * (w + pad);
imgNode.y = j * (h + pad);
// store each image node
//_imgNodes.push(imgNode);
_imgNodes[nodeCount++] = imgNode;
// add each image node to the stage
_tiledImg.addChild(imgNode);
_tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
}
}
}

Answer 1

The problem you have is your are adding the event to the parent of the node(_tiledImg).
function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
{
var w:Number = _img.width / rows;
var h:Number = _img.height / cols;
var numNodes:int = rows * cols;
_imgNodes = [];
var nodeCount:int = 0;
for (var i:int = 0; i < rows; i++)
{
for (var j:int = 0; j < cols; j++)
{
// get area of current image node
var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);
// copy bitmap data of current image node
var tempBd:BitmapData = new BitmapData(w,h,true);
tempBd.copyPixels(_img.bitmapData, sourceRect, zero);
// place image node bitmap data into sprite
var imgNode:Bitmap = new Bitmap(tempBd);
imgNode.x = i * (w + pad);
imgNode.y = j * (h + pad);
// store each image node
//_imgNodes.push(imgNode);
_imgNodes[nodeCount++] = imgNode;
// you need a container since you can not attach event listeners to a BitMap
var sprite:Sprite = new Sprite()
sprite.mouseChildren = false;
sprite.addEventListener(MouseEvent.CLICK,removeMC);
sprite.addChild(imgNode);
// add each image node to the stage
_tiledImg.addChild(sprite);
// _tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
}
}
}
function removeMC(e:MouseEvent)
{
var target:Sprite = event.currentTarget as Sprite;
target.parent.removeChild(target)
}

Answer 2

If I am following correctly, you are trying to remove an imgNode on MouseClick. If that is the case, you should change removeMC function to this:
function removeMC(e:MouseEvent)
{
//removes the movie clip
trace(e.target);
_tiledImg.removeChild(event.currentTarget);
}
Also, you shouldn't add the listener within the for loop, but instead add it outside of the for loops (since you are just adding the listener to _tiledImg and that doesn't change in the for loops).

Answer 3

A easy way to always remove a child from the right parent is to do as following
function removeMC(e:MouseEvent)
{
//removes the movie clip
var target:Sprite = event.currentTarget as Sprite;
target.parent.removeChild(target)
}