Удалить кнопку при нажатии

Я пытаюсь заставить свою кнопку удалить себя после нажатия, так как ее нельзя нажимать дважды, и я думаю, что могу получить справочную ошибку, потому что я использую онлайн-компилятор. Мне также трудно перейти на 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 удалены из-за того, что они ОЧЕНЬ длинные.

Там полно кода. Все ли относится к рассматриваемому вопросу? Пожалуйста, рассмотрите минимальный воспроизводимый пример

Jon P 04.07.2019 06:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
1 917
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Сделайте идентификатор кнопки, например id="btn" Вставьте по клику код ниже

И используйте следующий код

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

Ваш вопрос немного неясен и кода много, не очевидно какую кнопку хотите удалить. Таким образом, я дам вам общий ответ, который, надеюсь, вы сможете применить.

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

Извините, что я неясен. Я хотел убрать его из поля зрения, что Субха и сделал для меня. Тем не менее, я запомню ваше предложение и воспользуюсь им, если понадобится.

user10467555 04.07.2019 07:14

Если вы хотите удалить кнопку, а не просто скрыть ее, без jquery вы будете использовать аргумент event из обработчика onclick;

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

Спасибо! Я имел в виду убрать его из поля зрения, возможно, не формировать код. Хотя, возможно, я смогу использовать это позже. :)

user10467555 04.07.2019 07:13

Без проблем. Да, скрыть это на самом деле будет меньше работы для браузера.

Brian Swisher 04.07.2019 07:22

Другие вопросы по теме