Adding and removing bitmap images with mouse "click" - JavaScript / CreateJS

Question

I am adding coins (bitmaps) to some containers(10 containers alltogether) when I click them. Now I want to remove the coins one after another. For example if I click 3 times on a Shape on my stage than I create 3 coins and put them into a container. Now if I click one time on the remove button (also on the stage) it should remove the last coin added to the container and so on.

Here is how I attempted it: -->"evt.target" is a container

this.coin= new createjs.Bitmap(images.jeton_image);
this.coin.value = this.coin_index;
this.coin_array.push(this.coin);
this.coin_index++;
this.coin.regX = 50;
this.coin.regY = 50;
evt.target.addChild(this.jetons);
this.target_arr.push(evt.target);

Now here is how I would remove the coins:

this.target_arr[this.target_arr.length].removeChild(this.coin);

My problem is that I can not remove the coins from the 10 containers. What am I doing wrong?

Answer 1

What I see here is that the problem is residing in the position of the array index you are trying to manipulate:

First Stage

if you use push to add this data to your Array, data would be added to the end of the index

let's say:

var a=[]; //a.length would be 0 and you can't position any index inside

now when you push some data to it:

 a.push(1);//a.length=1
    [ 1 ]
      ^
index:0    
    a.push(2);//a.length=2
    [ 1 , 2 ]
      ^   ^
index:0   1 
    a.push(3);//a.length=3
    [ 1, 2, 3 ]
      ^  ^  ^
index:0  1  2 //when trying to make that a[a.length]  
              //would give error as the maximum position 
              //reside in the index 2 not 3

so this :

this.target_arr[this.target_arr.length].removeChild(this.coin);

should be this instead:

this.target_arr[this.target_arr.length-1].removeChild(this.coin);

Second stage

what you are missing is :

this.coin_array.pop(this.coin);
this.target_arr.pop(evt.target);

To remove the latest element when removing your child node to shrink the array cause in the memory your Array is still composed of 10 elements, so you should shrink it by poping up the latest element concurrently while removing the image