单击后如何从 DOM 中删除按钮元素？答案

【问题标题】：How does one remove a button element from the DOM after it was clicked?单击后如何从 DOM 中删除按钮元素？
【发布时间】：2021-05-14 06:35:34
【问题描述】：

我想让我的按钮在点击时自行删除，我已经尝试过了：

var myArray = ['JavaScript is awesome', 'Pacific coffe is really delicious', 'This is a fancy website'];
var rand = Math.floor(Math.random() * myArray.length);
var button = document.getElementsByClassName("newQuote");


function showquote() {
  console.log(document.getElementsByClassName("quote").innerHTML = myArray[rand]);
  button.remove();
};

<!DOCTYPE html>
<html lang="en">

<head></head>
<p class="quote"></p>
<button class="newQuote" onclick="showquote()">Generate Quote</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>

<script src="main.js"></script>

还是不行，求帮助

【问题讨论】：

从/与所有提供的答案，还有什么问题吗？
如果 OP 对任何提供的大量答案提供一些反馈和/或使用接受 OP 最有用答案的按钮，那就太好了。提出问题、寻求帮助但不提供反馈并不是最礼貌的行为。也许您的时间与所有回答者的时间一样多。

标签： javascript dom button events

【解决方案1】：

button是一个数组就写button[0].remove();

var myArray = ['JavaScript is awesome', 'Pacific coffe is really delicious', 'This is a fancy website'];
var rand = Math.floor(Math.random() * myArray.length);
var button = document.getElementsByClassName("newQuote");


function showquote(){
    console.log(document.getElementsByClassName("newQuote").innerHTML = myArray[rand]);
   button[0].remove()
};

<!DOCTYPE html>
<html lang="en">
<head></head>
<p class="quote"></p>
<button class ="newQuote"onclick="showquote()">Generate Quote</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>


<script src="main.js"></script>
</html>

【讨论】：

【解决方案2】：

.remove() 是一个 jQuery 方法。但是您正在使用 vanilla Javascript (document.getElementsByClassName("newQuote")) 选择您的按钮，因此它没有任何 jQuery 方法。此外，getElementsByClassName 返回一个元素的列表，而不是一个元素，所以你必须迭代它们。

解决方案：使用 jQuery 选择您的按钮。

另外，为什么要使用内联 JS (onclick="showquote()")？使用 jQuery 点击处理程序。

var button = $(".newQuote");
button.click(showquote);

function showquote() {
  button.remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p class="quote"></p>
<button class="newQuote">Generate Quote</button>

【讨论】：

"The ChildNode.remove() method removes the object from the tree it belongs to."。 OP 在这件事上的问题是button = document.getElementsByClassName("newQuote"); 没有将HTMLElement 分配给button，而是分配给HTMLCollection。
是的，我确实知道了。另一个解决方案是使用它，因为 OP 无论如何都会加载 jQuery :)

【解决方案3】：

remove 按钮的 OP 的主要问题是 ...

button = document.getElementsByClassName("newQuote");

... 没有将HTMLElement 分配给button，而是分配HTMLCollection ...看看getElementsByClassName。

人们可能会考虑使用一种更简单或更通用的方式来访问触发了某个事件的元素。

一种可靠的方法是通过addEventListener 注册事件，而不是依赖于 OP 的原始内联事件处理。然后一个使用事件处理程序的Event object 的currentTarget，或者使用同样代表触发事件目标的the handler's this context。

var myArray = [
  'JavaScript is awesome',
  'Pacific coffe is really delicious',
  'This is a fancy website',
];

function addQuote(evt) {
  const btnElm = evt.currentTarget;
//const btnElm = this; // this variant is equally fine.

  document
    .querySelector('.quote')
    .textContent += ' - ' + myArray[
      Math.floor(Math.random() * myArray.length)
    ];

  btnElm.remove();
};

function init() {
  document
    .querySelectorAll('.newQuote')
    .forEach(elmNode =>
      elmNode.addEventListener('click', addQuote)
    );
}

init();

<button class ="newQuote">Generate a quote</button>
<button class ="newQuote">Generate another quote</button>
<button class ="newQuote">Generate yet another quote</button>

<p class="quote"></p>

【讨论】：