Question

我有一个非常简单的代码：我想在点击它之后取消按钮以显示其他内容。我试过这种方式

HTML：

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

JS：

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

只有点击两次按钮才会取消按钮。我哪里弄错了？我很抱歉，如果这是一个重新发布，我试图检查，但没有找到与我相同的排序

Answer 1

一旦您点击它，您的代码似乎就会删除该按钮。这是正确的，还是我们没有查看完整标记？

Answer 2

试试这个：

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

container.childNodes[0]是文本节点，其中文本为Newline

Answer 3

我给了按钮id并使用id删除了它。在你的情况下，它不会在第一次删除，因为第一次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 4

或者，你可以这样做：

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

不需要单独的JS文件。

Answer 5

如果您删除\n（即新行），您的代码将会正常工作

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

您的代码无效的原因是，当您在enter之后点击div时，HTML DOM会自动创建一个虚拟文本节点作为其子级。因此，您的input节点成为container的第二个孩子。

<强> Working fiddle

希望有所帮助：）

HTML - 仅在第二次单击后取消按钮

5 个答案: