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

我有一个非常简单的代码：我想在点击它之后取消一个按钮以显示其他内容。我想这样HTML - 仅在第二次点击后取消按钮

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]); 
}

会发生什么只有当我点击两次按钮被取消。我哪里错了？对不起，如果这是转发，我试图检查，但没有找到与我的相同的排队

来源

2016-09-16 RickIris

它可以帮助，看看这个。 http://stackoverflow.com/questions/21214590/change-button-text-show-hide-show-on-click-in-jquery-toggle谢谢 – Sagar

请接受一个答案，帮助你解决你的问题。它也可以帮助他人。 –

如果删除\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将自动创建一个虚拟文本节点，因为它是子节点。因此您的input节点成为您的container的第二个孩子。

Working fiddle

希望它能帮助:)

来源

2016-09-16 13:18:30

它看起来好像你的代码将删除按钮，一旦你点击它。这是正确的，还是我们没有看完整标记？

来源

2016-09-16 13:03:46

是的，这就是我想要的，但按钮在第二次点击时被删除...代码继续创建表，所以如果我点击按钮两次，这是一个问题，因为我得到两个表 – RickIris

试试这个：

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

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

来源

2016-09-16 13:08:53 CoderLim

我给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>

来源

2016-09-16 13:11:11 VJI

或者，你可以这样做：

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

无需单独的JS文件。

来源

2016-09-16 13:11:35 nockieboy

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

回答

相关问题