javascript - 单击后删除按钮

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