actionscript removing movieclip children - actionscript-3

Question

Ive got a document class in this class I dynamically create movie clips, store them in an array and finally add it to the stage using addChild. That's all fine, the issue is though im trying to remove the movieClips through the array and it is throwing an error:
1034: Type Coercion failed: cannot convert []#26be1fb1 to flash.display.DisplayObject.
Here is my code:
// Note i have declared the array outside the function, so that's not an issue
function x (e:MouseEvent){
if (thumbnails.length !== 0){ // Determine if any movieclips have already been created on stage and delete them
for(var ctr:int = 0; ctr < thumbnails.length;ctr++ ){
removeChild(thumbnails[ctr]);
}
}
for (var i: int = 0;i < userIput; i++){ // Loop through and create instances of symbol
var thumb:Thumbnail = new Thumbnail();
thumb.y = 180; // Set y position
thumb.x = 30 + ((thumb.width + 10) * i);
addChild(thumb);
thumbnails[i] = [thumb]; // Add to array
}
}

Answer 1

When you retrieve the MovieClip from your Array, you need to cast it as a DisplayObject before attempting to remove it:
if (thumbnails.length !== 0){ // Determine if any movieclips have already been created on stage and delete them
for(var ctr:int = 0; ctr < thumbnails.length;ctr++ ){
removeChild(DisplayObject(thumbnails[ctr]));
}
}
Alternatively, you could consider using a Vector (a type-safe version of an Array) with the base-type set as DisplayObject:
var thumbnails:Vector.<DisplayObject> = new Vector.<DisplayObject>();
thumbnails.push(new MovieClip());
this.addChild(thumbnails[0]);
this.removeChild(thumbnails[0]);
For further reading, have a look at the Adobe documentation on type conversion and Vectors.
Update:
Instead of adding an instance of Thumbnail to your Array the following line is actually adding a further Array containing a single element to your thumbnails Array (in effect you are creating a multi-dimensional Array):
// You're assigning an array literal with a single element
// to this element of the the thumbnails array
thumbnails[i] = [thumb];
Try either of the following instead:
// What you meant
thumbnails[i] = thumb;
// Better
thumbnails.push(thumb);

Answer 2

The error that appears tells you that Flash Player cannot convert []#26be1fb1 to DisplayObject. The []#26be1fb1 gives you a hint what type of object at which address cannot be converted. [] is the type of object here that means the type Array so when removeChild() is called you try to pass an array to it, but the method expects DisplayObject.
Why this happens
Your code has a very simple but maybe unobstrusive problem, namely at this code line:
thumbnails[i] = [thumb]; // Add to array
You put your thumb into an array by using [] around thumb. So what your code actually is doing is that it adds an array with a single element (thumb) to the array thumbnails. After that you have an array of arrays with single elements.
Solution
Change the above line to:
thumbnails[i] = thumb; // Add to array
This should solve your issue.

Answer 3

For your perceived issue:
Use Vector instead of Array
or cast array item to Thumbnail class
But the main culprit will probably be the fact you never clear the items from the array, you remove them from the parent/stage, but you do not remove them from the array… together with adding the items at a specific place in the array will cause erratic behavior:
you add them:
t[0] = item0_0
t[1] = item0_1
t[2] = item0_2
t[3] = item0_3
then remove item0_0, item0_1, item0_2, item0_3 from stage, but leave them in the array
next you add e.g. 2 new ones
t[0] = item1_0
t[1] = item1_1
so you have:
on stage:
item1_0
item1_1
in array:
t[0] = item1_0
t[1] = item1_1
t[2] = item0_2
t[3] = item0_3
This should be working:
var thumbnails:Vector.<Thumbnail> = new Vector.<Thumbnail>();
function x (e:MouseEvent) {
var thumb:Thumbnail;
for each(thumb in thumbnails){
removeChild(thumb);
}
thumbnails = new Vector.<Thumbnail>(); // clear Vector by re-initiating it
for (var i: int = 0;i < userIput; i++){
thumb = new Thumbnail();
// ...
addChild(thumb);
thumbnails.push(thumb);
}
}