How to remove object from index in array AS3 - arrays

Question

Hey Everyone so I've been killing myself over this and this is probably the last thing I need help on to finally finish this project.
So I have a timer event that puts the Movie clip in the array onto the Stage. The MovieClip is named mSquare and from the timer event I add it like so:
private function addSquare(e:TimerEvent):void
{
mSquare = new mcSquare();
stage.addChild(mSquare);
mSquare.x = (stage.stageWidth / 2);
mSquare.y = (stage.stageHeight / 2) + 450;
aSquareArray.push(mSquare);
trace(aSquareArray.length);
}
Now what I am trying to Accomplish is when the user clicks or has its mouse down on the object, I want that object that the user clicked to be removed from the stage.
Now I can't get it to function properly when the user clicks on one of the MovieClips from the array thats added to the stage. Or if I do then MovieClip that was currently clicked doesnt get destroyed but rather another instance of it on the stage gets destroyed. Its just real bad.
So Here is how I have it set up so far...
In my Constructor:
stage.addEventListener(MouseEvent.MOUSE_DOWN, movieClipHandler);
Then the movieClipHandler MouseEvent:
private function movieClipHandler(e:MouseEvent):void //test
{
mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);
}
Then in the squareIsBeingClicked Function:
private function squareIsBeingClicked(e:MouseEvent):void
{
var square:DisplayObject = e.target as DisplayObject; // clicked square
var i:int = aSquareArray.indexOf(square); // index in the array
if (i < 0) //THIS IS WHERE I GET CONFUSED
{
// the MC is out of the array
trace("Clicked");
mouseIsDown = true;
checkSquareIsClicked();
} else
{
// the MC is in the array
}
}
And finally i have a function called checkSquareIsClicked to do all the work:
private function checkPopIsBeingClicked():void
{
//Loop through all pops
for (var i:int = 0; i < aPopArray.length; i++)
{
//Get current pops in i loop
var currentpop:mcPop = aPopArray[i];
if (mouseIsDown)
{
trace("Current Pop Destroyed")
aPopArray.splice(i, 1);
currentpop.destroyPop();
nScore ++;
updateHighScore();
updateCurrentScore();
mouseIsDown = false;
//Add Explosion Effect
popExplode = new mcPopExplode();
stage.addChild(popExplode);
popExplode.y = currentpop.y;
popExplode.x = currentpop.x;
}
}
}
I know I am doing something really wrong because it shouldnt take this much functions to initiate this array of mouse event. Also someone on here helped me out with the display object and idex as shown above but not sure how to truly implement it. I've exhausted all ideas. Any Help would be appreciated or any pointers. Thank you!

Answer 1

As #Rajneesh answer indicates, adding your mouse event listener to your MovieClip instead of using the stage mouse event to add the listener, is the correct way to go. That means instead of doing this...:
stage.addEventListener(MouseEvent.MOUSE_DOWN, movieClipHandler);
private function movieClipHandler(e:MouseEvent):void {
mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);
}
Would be replaced in your addSquare function:
private function addSquare(e:TimerEvent):void {
mSquare = new mcSquare();
stage.addChild(mSquare);
mSquare.x = (stage.stageWidth / 2);
mSquare.y = (stage.stageHeight / 2) + 450;
aSquareArray.push(mSquare);
//look here
mSquare.addEventListener(MouseEvent.MOUSE_DOWN, squareIsBeingClicked);
trace(aSquareArray.length);
}
Now you can change your removal functions. I'm going to alter some of this code to help you optimize it and still achieve the desired effect. Let's start with squareIsBeingClicked:
private function squareIsBeingClicked(e:MouseEvent):void {
var square:DisplayObject = e.target as DisplayObject; // clicked square
var i:int = aSquareArray.indexOf(square); // index in the array
//this is where you will no longer be confused :)
if (i != -1) {
trace("Clicked");
mouseIsDown = false;
onSquareIsClicked( square ); //this is in place of your checkSquareIsClicked
square.parent.removeChild( square );
aSquareArray.splice( i, 1 ); //remove element from the array
//remove the listener, very important
square.removeEventListener( MouseEvent.CLICK, squareIsBeingClicked );
square = null; //null it if we are not using it again, ready to be garbage collected
}
}
You now no longer need all the removal pieces in your previous checkSquareIsClicked. As you probably noticed I added a function onSquareIsClicked(), this is to help with any functionality you might need to do when this event is happening. Since you are adding an "explosion" where the object was selected, here's what onSquareIsClicked() looks like:
private function onSquareIsClicked( square:DisplayObject ):void {
popExplode = new mcPopExplode();
stage.addChild(popExplode);
popExplode.y = currentpop.y;
popExplode.x = currentpop.x;
//square.destroyPop(); //obviously this function will not work on a type displayObject
//in which case you just need to cast square to the object containing the method
nScore ++;
updateHighScore();
updateCurrentScore();
}

Answer 2

Add mouse click events to objects to be removed and get target and remove it like so:
(Note: Also, no need to add those MovieClips to array ( add only if necessary))
private function addSquare(e:TimerEvent):void
{
mSquare = new mcSquare();
mSquare.addEventListener(MouseEvent.CLICK, removeSquare);
stage.addChild(mSquare);
//Position here mSquare
}
private function removeSquare(e:MouseEvent):void
{
var tempObject:MovieClip = MovieClip(e.currentTarget); //get the square object
removeChild(tempObject);
tempObject = null;
}