HTML - ボタンは2回目のクリック後にキャンセルされます

Question

私は非常に単純なコードを持っています：ボタンをクリックして別のものを表示した後でキャンセルしたいです。

<div id="container"> 
    <input type="button" value="New game" onclick="newGame()" /> 
</div> 

JS：私はそれを2回クリックした場合にのみボタンがキャンセルされますで何が起こる

function newGame() { 
    var container = document.getElementById("container"); 
    container.removeChild(container.childNodes[0]); 
} 

私はこのように

HTMLを試してみました。どこが間違っていたのですか？ これが再投稿であれば申し訳ありませんが、私は確認しましたが、私と同じ質問を見つけませんでした。

Answer 1

あなたが\nを削除した場合（すなわち新しい行）あなたのコードが動作する

はあなたのコードが動作しない理由はときに、この

function newGame() { 
 
var container = document.getElementById("container"); 
 
debugger; 
 
container.removeChild(container.childNodes[0]); 
 
}

<div id="container"><input type="button" value="New game" onclick="newGame()" /></div>

のようにしてみてくださいdivの後にenterを押すと、HTML DOMはその子として1つのダミーテキストノードを自動的に作成します。したがって、お客様のinputノードは、containerのというの第2子になりました。

Working fiddle

それは:)

Answer 2

ボタンをクリックするとコードが削除されるようです。これは正しいのですか、完全なマークアップを見ていませんか？

Answer 3

はこれを試してみてください。

function newGame() { 
    var container = document.getElementById("container"); 
    // change 0 to 1 
    container.removeChild(container.childNodes[1]); 
} 

container.childNodes[0]は、テキストがNewline

Answer 4

である私がボタンにIDを与えたとidを使用してそれを削除したテキストノード、です。 初めての場合container.childNodes [0]はボタンではないので、最初は削除されません。自分の機能でconsole.logを使って自分自身を試してみてください。また

Answer 5

function newGame() { 
 
    var container = document.getElementById("container"); 
 
    var d_nested = document.getElementById("button_1"); 
 
    var throwawayNode = container.removeChild(d_nested); 
 
    //container.innerHTML=''; 
 
}

<div id="container"> 
 
    <input id="button_1" type="button" value="New game" onclick="newGame()" /> 
 
</div>

、あなたがこれを行うことができます：

<div id="container"> 
<input type="button" value="New game" onclick="document.getElementById('container').removeChild(this);" /> 

必要はありません別のJSファイルを。