Delete a button upon click

Question

I'm trying to get my button to delete itself after being clicked, as it shouldn't be clicked twice, and I think I may get the reference error because I'm using an online compiler. I also have a hard time changing to jquery, as it seems to mess up everything else I wrote.

I've looked through a ton of stack overflow pages, none of them seem to have malfunctioning code after the switch to jquery. I would prefer to have a way to do this in base html, but if not, I hope someone can explain how to make the switch.

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>

I thought it would instantly make the button disappear, and then that would be the end of it. I didn't know there would be other stuff involved. Note: all the src tags are removed due to them being VERY long.

Answer 1

Make an id of button as example id="btn" Put on click of the code below

And use following code

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

Answer 2

If you wanna remove the button & not just hide it, without jquery, you'll use an event argument from the onclick handler;

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

Answer 3

Your question is a little unclear and there is a lot of code, it is not obvious which button you want to delete. As such I'll give you a generic answer that hopefully you will be able to apply.

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