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，则将使用event处理程序中的onclick自变量；

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" />

单击后删除按钮

3 个答案: