Easeljs child of container still displayed at canvas after removal

Question

I tried creating a little tetris game to get into javascript. I encountered a few problems with easeljs, but I was able to find a solution for most of them. But there is one problem I just can't figure out. I did it like this:

tetrisI = function(x, y, size) {
    this.childs = new Array();

    var rect1 = new createjs.Shape();
    var rect2 = new createjs.Shape();
    var rect3 = new createjs.Shape();
    var rect4 = new createjs.Shape();
    rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
    rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
    rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
    rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

    this.addChild(rect1);
    this.addChild(rect2);
    this.addChild(rect3);
    this.addChild(rect4);

    this.childs.push(rect1);
    this.childs.push(rect2);
    this.childs.push(rect3);
    this.childs.push(rect4);

}
tetrisI.prototype = new createjs.Container();
tetrisI.Container_initialize = tetrisI.initialize;

var stage = new createjs.Stage("mycanvas");
var tetrisBlock = new tetrisI(120, 0, gameState.blockSize);
stage.addChild(tetrisBlock);

As you can see the tetrisBlocks are Containers with several shapes in it. At some point, when I detect a full line I do something like this:

this.removeChild(this.childs[index]);

Where this is a tetrisBlock and this.childs[index] is one of the shapes inside of the tetrisBlock. The problem is: After I do that the shape is successfully removed, but it's still displayed at the canvas even after a stage.update() command.

If I remove the whole tetrisBlock from the stage it works, but that's not what I want. I want to remove just a few children of a tetrisBlock.

Answer 1

Got it to work after changing the tetrisI function to this:

(function() {

var tetrisI = function(x, y, size) {
  this.initialize(x, y, size);
}
var p = tetrisI.prototype = new createjs.Container();

tetrisI.prototype.Container_initialize = p.initialize;
tetrisI.prototype.initialize = function(x, y, size) {
this.Container_initialize();
// add custom setup logic here.
this.childs = new Array();

var rect1 = new createjs.Shape();
var rect2 = new createjs.Shape();
var rect3 = new createjs.Shape();
var rect4 = new createjs.Shape();
rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

this.addChild(rect1);
this.addChild(rect2);
this.addChild(rect3);
this.addChild(rect4);

this.childs.push(rect1);
this.childs.push(rect2);
this.childs.push(rect3);
this.childs.push(rect4);

this.regX = size / 2;
this.regY = size * 2;
this.size = size;
this.height = size * 4;
this.width = size;
this.x = x + this.regX;
this.y = y + this.regY;
tetrisI.prototype.pos = new Array(0, 0, 0, 1, 0, 2, 0, 3);

}

window.tetrisI = tetrisI;
}());