HTML-кнопка отменяется только после второго щелчка

Question

У меня очень простой код: я хочу отменить кнопку после ее щелчка, чтобы отобразить что-то еще. Я попробовал этот путь

HTML:

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

ЯШ:

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

Что происходит кнопка будет отменено только, если я нажму его в два раза. Где я ошиблась? Простите, если это repost, я попытался проверить, но не нашел ни одного вопроса, который был бы похож на мой

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>

Причина, почему ваш код не работает это, когда вы нажмете enter после div, HTML DOM автоматически создаст один фиктивный текстовый узел, поскольку он является дочерним. следовательно, ваш input узел стал вторым ребенком для вашего container.

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

Я дал идентификатор на кнопку и удалить его с помощью идентификатора. В вашем случае он не удаляется в первый раз, потому что container.childNodes [0] в первый раз не является кнопкой. Попробуйте самостоятельно, используя console.log в своей функции.

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>

Answer 5

В качестве альтернативы, вы можете сделать это:

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

Нет отдельный файл JS необходим.