单击时删除按钮

Question

我试图让我的按钮在被点击后删除自己，因为它不应该被点击两次，我想我可能会收到引用错误，因为我使用的是在线编译器。 我也很难改用 jquery，因为它似乎把我写的其他所有东西都搞砸了。

我查看了大量堆栈溢出页面，在切换到 jquery 后，它们似乎都没有出现故障代码。 我希望有一种方法可以在基本 html 中执行此操作，但如果没有，我希望有人可以解释如何进行切换。

 var clicks = 0; var cursor1 = false; var autoclicker = false; //Click Button And Cursor Upgrade document.getElementById("clickMe").onclick = function() { clicks++; if (cursor1 == true) clicks++; document.getElementById('output').innerHTML = clicks; document.getElementById("Cursors").onclick = function() { //PAY UP, PEASANT clicks -= 100; //NO MONEY, NO SERVICE if (clicks < 0) { clicks += 100; alert("You are too poor! Peasant..."); } else if (cursor1 == true) { clicks += 100; alert("You can't do that!") } else { cursor1 = true; alert("You bought an extra cursor!"); } document.getElementById('output').innerHTML = clicks; } } //Autoclicker var delay = 1000; var autoClick1 = false; var autoClick2 = false; var autoClick3 = false; var autoClick4 = false; var autoClick5 = false; var autoClick6 = false; var autoClick7 = false; var autoClick8 = false; var autoClick9 = false; var autoClick0 = false; document.getElementById("AutoClicker").onclick = function() { clicks -= 250; if (clicks < 0) { clicks += 250; alert("You are too poor! Peasant..."); } else if (autoclicker == true) { clicks += 250; alert("You can't do that!"); } else { autoclicker = true; alert("You bought the autoclicker!"); document.getElementById('output').innerHTML = clicks; setInterval(clickIncrement, delay); $("input").remove("AutoClicker"); } } var autoCMax = false; document.getElementById("moreAutoC").onclick = function() { clicks -= 250; if (clicks < 0) { clicks += 250; alert("You are too poor! Peasant..."); } else if (autoCMax == true) { clicks += 250; alert("It's already maxed!"); } else { if (autoClick0 == false) { autoClick0 = true; alert("You bought 1 more autoclicker! Autoclickers:2"); } else if (autoClick0 == true && autoClick1 != true) { autoClick1 = true; alert("You bought 1 more autoclicker! Autoclickers:3"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 != true) { autoClick2 = true; alert("You bought 1 more autoclicker! Autoclickers:4"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 != true) { autoClick3 = true; alert("You bought 1 more autoclicker! Autoclickers:5"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 != true) { autoClick4 = true; alert("You bought 1 more autoclicker! Autoclickers:6"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 == true && autoClick5 != true) { autoClick5 = true; alert("You bought 1 more autoclicker! Autoclickers:7"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 == true && autoClick5 == true && autoClick6 != true) { autoClick6 = true; alert("You bought 1 more autoclicker! Autoclickers:8"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 == true && autoClick5 == true && autoClick6 == true && autoClick7 != true) { autoClick7 = true; alert("You bought 1 more autoclicker! Autoclickers:9"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 == true && autoClick5 == true && autoClick6 == true && autoClick7 == true && autoClick8 != true) { autoClick8 = true; alert("You bought 1 more autoclicker! Autoclickers:10"); } else if (autoClick0 == true && autoClick1 == true && autoClick2 == true && autoClick3 == true && autoClick4 == true && autoClick5 == true && autoClick6 == true && autoClick7 == true && autoClick8 == true && autoClick9 != true) { autoClick9 = true; alert("You bought 1 more autoclicker! Autoclickers:11"); autoCMax = true; } else { alert("It's already maxed!") } if (autoClick0 == true) setInterval(clickIncrement, delay); if (autoClick1 == true) setInterval(clickIncrement, delay); if (autoClick2 == true) setInterval(clickIncrement, delay); if (autoClick3 == true) setInterval(clickIncrement, delay); if (autoClick4 == true) setInterval(clickIncrement, delay); if (autoClick5 == true) setInterval(clickIncrement, delay); if (autoClick6 == true) setInterval(clickIncrement, delay); if (autoClick7 == true) setInterval(clickIncrement, delay); if (autoClick8 == true) setInterval(clickIncrement, delay); if (autoClick9 == true) setInterval(clickIncrement, delay); } } //code buffs function clickIncrement() { clicks++; } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds) { break; } } } function display() { document.getElementById('output').innerHTML = clicks; }

 <!doctype html> <html> <head> <title>Cookie Clicker (WIP)</title> <script> //alert("Please click the cookie first as there is an issue with a segment of the code. Do not hack. It makes the game not fun."); </script> </head> <body> <input class="tooltip" id="clickMe" type="image" src="" onclick="doFunction();" /> <br> <h2>Clicks:</h2> <p id="output"></p> <h2 align="center">Perks</h2> <input title="Doubles Mouse Clicks Cost:250" class="tooltip" id="Cursors" type="image" src="" width="150" onclick="doFunction();" /> <br> <h2>Items</h2> <input id="AutoClicker" title="Buy The Autoclicker For 250 Clicks! Clicks once every second!" type="image" src="https://www.macupdate.com/images/icons256/50547.png" width="150" onclick="doFunction();" /> <br> <h2>Item Upgrades:</h2> <input id="moreAutoC" type="image" src="" title="More Autoclickers! (MAX:11)" onclick="doFunction();" /> </body> </html>

我以为它会立即使按钮消失，然后就结束了。 我不知道还会涉及其他事情。 注意：所有 src 标签都被删除，因为它们很长。

Answer 1

如果你想删除按钮而不是隐藏它，没有 jquery，你将使用来自onclick处理程序的event参数；

event.target.parentNode.removeChild(event.target);

Answer 2

将按钮的 id 作为示例 id="btn" 点击下面的代码

并使用以下代码

function hide(){
   document.getElementById("btn").style.display = "none";
}

Answer 3

你的问题有点不清楚，代码很多，不清楚你要删除哪个按钮。 因此，我会给你一个通用的答案，希望你能够申请。

 //Will just hide the button document.getElementById("willHide").addEventListener("click", function(event){ event.target.style.display = "none"; }); //Will remove the button from the DOM entirely document.getElementById("willDelete").addEventListener("click", function(event){ event.target.parentNode.removeChild(event.target); }); //Will disable the button document.getElementById("willDisable").addEventListener("click", function(event){ event.target.disabled = true; });

 <input type="button" id="willHide" value="I will be hidden" /> <input type="button" id="willDelete" value="I will be deleted" /> <input type="button" id="willDisable" value="I will be disabled" />