remove() method now correctly removes node descendants

dist/kinetic-core.js

@@ -1300,7 +1300,7 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     remove: function(child) {
-        if(child.index !== undefined && this.children[child.index]._id == child._id) {
+        if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
                 stage._removeId(child);
@@ -1312,18 +1312,24 @@ Kinetic.Container.prototype = {
                 var node = go.tempNodes[n];
                 if(node._id === child._id) {
                     go.tempNodes.splice(n, 1);
-                    n = go.tempNodes.length;
+                    break;
                 }
             }
 
             this.children.splice(child.index, 1);
             this._setChildrenIndices();
-            child = undefined;
-        }
 
-        // do extra stuff if needed
+            // remove children
-        if(this._remove !== undefined) {
+            if(child.children) {
-            this._remove(child);
+                for(var n = 0; n < child.children.length; n++) {
+                    child.remove(child.children[n]);
+                }
+            }
+
+            // do extra stuff if needed
+            if(this._remove !== undefined) {
+                this._remove(child);
+            }
         }
 
         // chainable

src/Container.js

@@ -68,7 +68,7 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     remove: function(child) {
-        if(child.index !== undefined && this.children[child.index]._id == child._id) {
+        if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
             var stage = this.getStage();
             if(stage !== undefined) {
                 stage._removeId(child);
@@ -80,18 +80,24 @@ Kinetic.Container.prototype = {
                 var node = go.tempNodes[n];
                 if(node._id === child._id) {
                     go.tempNodes.splice(n, 1);
-                    n = go.tempNodes.length;
+                    break;
                 }
             }
 
             this.children.splice(child.index, 1);
             this._setChildrenIndices();
-            child = undefined;
-        }
 
-        // do extra stuff if needed
+            // remove children
-        if(this._remove !== undefined) {
+            if(child.children) {
-            this._remove(child);
+                for(var n = 0; n < child.children.length; n++) {
+                    child.remove(child.children[n]);
+                }
+            }
+
+            // do extra stuff if needed
+            if(this._remove !== undefined) {
+                this._remove(child);
+            }
         }
 
         // chainable

tests/js/unitTests.js

@@ -440,7 +440,7 @@ Test.prototype.tests = {
         stage.add(layer);
 
         stage.setScale(0.5);
-        
+
         test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
         test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
 
@@ -463,10 +463,10 @@ Test.prototype.tests = {
         });
 
         stage.setScale(0.5);
-        
+
         test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
         test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
-        
+
         layer.add(circle);
         stage.add(layer);
     },
@@ -645,7 +645,9 @@ Test.prototype.tests = {
             width: 578,
             height: 200
         });
-        var layer = new Kinetic.Layer();
+        var layer = new Kinetic.Layer({
+            name: 'myLayer'
+        });
         var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
@@ -660,10 +662,14 @@ Test.prototype.tests = {
         stage.add(layer);
 
         test(stage.children.length === 1, 'stage should have 1 children');
+        test(stage.get('.myLayer')[0] !== undefined, 'layer should exist');
+        test(stage.get('.myCircle')[0] !== undefined, 'circle should exist');
 
         stage.remove(layer);
 
-        test(stage.children.length === 0, 'stage should have 0 children');
+		test(stage.children.length === 0, 'stage should have 0 children');
+        test(stage.get('.myLayer')[0] === undefined, 'layer should not exist');
+        test(stage.get('.myCircle')[0] === undefined, 'circle should not exist'); 
     },
     'STAGE - remove layer with no shapes': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -674,6 +680,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         stage.add(layer);
         stage.remove(layer);
+        
+        test(stage.children.length === 0, 'stage should have 0 children');
     },
     'STAGE - remove shape multiple times': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -1268,7 +1276,7 @@ Test.prototype.tests = {
 
         test(path.getData() === 'm200,100,100,0,0,50,z', 'data are incorrect');
         test(path.getDataArray().length === 4, 'data array should have 4 elements');
-        
+
         test(path.getDataArray()[1].command === 'L', 'second command should be an implied lineTo');
     },
     'SHAPE - add map path': function(containerId) {
@@ -1292,10 +1300,10 @@ Test.prototype.tests = {
                 stroke: '#999',
                 strokeWidth: 1,
             });
-			
+
-			if (key === 'US')
+            if(key === 'US')
-				test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
+                test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
-			
+
             path.on('mouseover', function() {
                 this.setFill('red');
                 mapLayer.draw();
@@ -1324,29 +1332,29 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-		var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z";
+        var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z";
 
-		var path = new Kinetic.Path({
+        var path = new Kinetic.Path({
-			data: c,
+            data: c,
-			fill: '#ccc',
+            fill: '#ccc',
-			stroke: '#999',
+            stroke: '#999',
-			strokeWidth: 1,
+            strokeWidth: 1,
-		});
+        });
 
-		path.on('mouseover', function() {
+        path.on('mouseover', function() {
-			this.setFill('red');
+            this.setFill('red');
-			layer.draw();
+            layer.draw();
-		});
+        });
 
-		path.on('mouseout', function() {
+        path.on('mouseout', function() {
-			this.setFill('#ccc');
+            this.setFill('#ccc');
-			layer.draw();
+            layer.draw();
-		});
+        });
 
-		layer.add(path);
+        layer.add(path);
         stage.add(layer);
 
-    },	
+    },
     'SHAPE - Quadradic Curve test from SVG w3c spec': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1359,60 +1367,60 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-		var c = "M200,300 Q400,50 600,300 T1000,300";
+        var c = "M200,300 Q400,50 600,300 T1000,300";
-		
-		var path = new Kinetic.Path({
-			data: c,
-			stroke: 'red',
-			strokeWidth: 5,
-		});
 
-		layer.add(path);
+        var path = new Kinetic.Path({
-		
+            data: c,
-		layer.add(new Kinetic.Circle({
+            stroke: 'red',
-			x: 200,
+            strokeWidth: 5,
-			y: 300,
+        });
-			radius: 10,
-			fill: 'black'
-		}));
 
-		layer.add(new Kinetic.Circle({
+        layer.add(path);
-			x: 600,
+
-			y: 300,
+        layer.add(new Kinetic.Circle({
-			radius: 10,
+            x: 200,
-			fill: 'black'
+            y: 300,
-		}));		
+            radius: 10,
+            fill: 'black'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 600,
+            y: 300,
+            radius: 10,
+            fill: 'black'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 1000,
+            y: 300,
+            radius: 10,
+            fill: 'black'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 400,
+            y: 50,
+            radius: 10,
+            fill: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 800,
+            y: 550,
+            radius: 10,
+            fill: '#888'
+        }));
+
+        layer.add(new Kinetic.Path({
+            data: "M200,300 L400,50L600,300L800,550L1000,300",
+            stroke: "#888",
+            strokeWidth: 2
+        }));
 
-		layer.add(new Kinetic.Circle({
-			x: 1000,
-			y: 300,
-			radius: 10,
-			fill: 'black'
-		}));	
-		
-		layer.add(new Kinetic.Circle({
-			x: 400,
-			y: 50,
-			radius: 10,
-			fill: '#888'
-		}));	
-		
-		layer.add(new Kinetic.Circle({
-			x: 800,
-			y: 550,
-			radius: 10,
-			fill: '#888'
-		}));
-		
-		layer.add(new Kinetic.Path({
-		data: "M200,300 L400,50L600,300L800,550L1000,300",
-			stroke: "#888",
-			strokeWidth: 2
-		}));
-		
         stage.add(layer);
 
-    },	
+    },
     'SHAPE - Cubic Bezier Curve test from SVG w3c spec': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1425,68 +1433,68 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-		var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
+        var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
-		
-		var path = new Kinetic.Path({
-			data: c,
-			stroke: 'red',
-			strokeWidth: 5,
-		});
 
-		layer.add(path);
+        var path = new Kinetic.Path({
-		
+            data: c,
-		layer.add(new Kinetic.Circle({
+            stroke: 'red',
-			x: 100,
+            strokeWidth: 5,
-			y: 200,
+        });
-			radius: 10,
-			stroke: '#888'
-		}));
 
-		layer.add(new Kinetic.Circle({
+        layer.add(path);
-			x: 250,
+
-			y: 200,
+        layer.add(new Kinetic.Circle({
-			radius: 10,
+            x: 100,
-			stroke: '#888'
+            y: 200,
-		}));		
+            radius: 10,
+            stroke: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 250,
+            y: 200,
+            radius: 10,
+            stroke: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 400,
+            y: 200,
+            radius: 10,
+            stroke: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 100,
+            y: 100,
+            radius: 10,
+            fill: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 250,
+            y: 100,
+            radius: 10,
+            fill: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 400,
+            y: 300,
+            radius: 10,
+            fill: '#888'
+        }));
+
+        layer.add(new Kinetic.Circle({
+            x: 250,
+            y: 300,
+            radius: 10,
+            stroke: 'blue'
+        }));
 
-		layer.add(new Kinetic.Circle({
-			x: 400,
-			y: 200,
-			radius: 10,
-			stroke: '#888'
-		}));	
-		
-		layer.add(new Kinetic.Circle({
-			x: 100,
-			y: 100,
-			radius: 10,
-			fill: '#888'
-		}));	
-		
-		layer.add(new Kinetic.Circle({
-			x: 250,
-			y: 100,
-			radius: 10,
-			fill: '#888'
-		}));
-		
-		layer.add(new Kinetic.Circle({
-			x: 400,
-			y: 300,
-			radius: 10,
-			fill: '#888'
-		}));
-		
-		layer.add(new Kinetic.Circle({
-			x: 250,
-			y: 300,
-			radius: 10,
-			stroke: 'blue'
-		}));
-		
         stage.add(layer);
 
-    },	
+    },
     'SHAPE - add shape with custom attr pointing to self': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,