Getting Rid of a Dom Element stage.removeChild( )

The function correct() in the snippet below controls what happens when you type 6 and enter in the game below.

I want the dom element gg gone (i.e. the entire equation 3+3=input) that is brought onto the stage gone after typing in 6 and then enter. It would be nice to keep the input put when I try stage.removeChild(gg) it does not work.

var score = 1;

function correct() {
  alert('Correct. ' + 'Your Score is ' + score);
  score += 1;
  gg.y = canvas.height;
}
var q1id = document.getElementById("q1");
q1id.addEventListener("keyup", function(event) {
  if (event.keyCode === 13 && document.getElementById("q1").value == 6) {
    document.getElementById("myBtn").click();
    event.preventDefault();
  }
});

var value = document.getElementById("q1");
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("equation"));
var gg = new createjs.DOMElement(document.getElementById("equation"));
gg.x = 500;
gg.y = 1;
can = document.getElementById("gameCanvas2");

function startGame() {
  stage.addChild(gg);
  createjs.Ticker.addEventListener("tick", handleTick);

  function handleTick(event) {
    gg.x += 1;
    gg.y += 0.5;
    if (value == "6") {
      gg.y = can.height;
    }
    stage.update();
  }
}

#gameCanvas {
  background-color: lightyellow;
}

<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<div class="canvasHolder2">
  <div id="equation"> 3+3= <input type="text" id="q1"></div>
  <button id="myBtn" onclick="correct()">Button</button>

  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>

<body onload="startGame();">
  <div>
    <canvas>This browser or document mode doesn't support canvas object.</canvas>
  </div>
</body>

Solution

You could use the line document.getElementById('equation').remove(); which takes advantage of the DOM method ChildNode.remove().

var score = 1;

function correct() {
  alert('Correct. ' + 'Your Score is ' + score);
  score += 1;
  //gg.y = canvas.height;
  document.getElementById('equation').remove();
}
var q1id = document.getElementById("q1");
q1id.addEventListener("keyup", function(event) {
  if (event.keyCode === 13 && document.getElementById("q1").value == 6) {
    document.getElementById("myBtn").click();
    event.preventDefault();
  }
});

var value = document.getElementById("q1");
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("equation"));
var gg = new createjs.DOMElement(document.getElementById("equation"));
gg.x = 500;
gg.y = 1;
can = document.getElementById("gameCanvas2");

function startGame() {
  stage.addChild(gg);
  createjs.Ticker.addEventListener("tick", handleTick);

  function handleTick(event) {
    gg.x += 1;
    gg.y += 0.5;
    if (value == "6") {
      gg.y = can.height;
    }
    stage.update();
  }
}

#gameCanvas {
  background-color: lightyellow;
}

<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<div class="canvasHolder2">
  <div id="equation"> 3+3= <input type="text" id="q1"></div>
  <button id="myBtn" onclick="correct()">Button</button>

  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>

<body onload="startGame();">
  <div>
    <canvas>This browser or document mode doesn't support canvas object.</canvas>
  </div>