删除 Dom 元素 stage.removeChild( )

Question

下面代码段中的函数 correct() 控制当您输入 6 并进入下面的游戏时会发生什么。

我希望在输入 6 然后输入后带到舞台上的 dom 元素 gg 消失（即整个等式 3+3=input）。当我尝试 stage.removeChild(gg) 它不起作用时，最好保留输入。

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>

Answer 1

您可以使用利用 DOM 方法的行 document.getElementById('equation').remove(); 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>

删除 Dom 元素 stage.removeChild( )

Getting Rid of a Dom Element stage.removeChild( )

html

javascript

dom

canvas

jsfiddle