title: Remove a shape on click with CreateJS
body: <p>How do you remove only the shape that's in CreateJS?  For my example, I have created a few squares with a function called <code>createSquare</code>.  My goal is to have a function, or a click event, that removes only the square that is clicked.</p>
  
  <p>I have tried event listeners and on click, and have had no luck.  I have commented out the code that I tried to use.</p>
  
  <p><a href="https://jsfiddle.net/w1vssodr/1/" rel="nofollow">Here is a link to a working fiddle.</a></p>
  
  <p>JS is as follows:</p>
  
  <pre><code>var canvas;
  var stage;
  var square;
  
  function init() {   
      canvas = document.getElementById("canvas");
      stage = new createjs.Stage(canvas);
  }
  
  function createSquare(){
      square = new createjs.Shape();
      square.graphics.beginFill("red").drawRect(0, 0, 50, 50)
      square.x = Math.random() * canvas.width;
          square.y = Math.random() * canvas.height;
      stage.addChild(square);
      stage.update();
  }
  
  // This code should remove the squares
  /*
  square.on("click", function(evt) {
      stage.removeChild(this);
  });
  */
  
  window.onload = init();
  
  createSquare();
  createSquare();
  createSquare();
  createSquare();
  createSquare();
  createSquare();
  </code></pre>