单击后如何从 DOM 中删除按钮元素？
[英]How does one remove a button element from the DOM after it was clicked?
问题描述
I want to make my button delete itsself on click,I already tried this:
我想让我的按钮在点击时自行删除，我已经尝试过了：
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>
still nothing works,please help仍然没有任何效果，请帮助
3 个解决方案
解决方案1
0 2021-02-10 15:16:19
button is an array just write button[0].remove(); 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
0 2021-02-10 15:16:31
.remove() is a jQuery method. .remove()是一种 jQuery 方法。 But you are selecting your button with vanilla Javascript ( document.getElementsByClassName("newQuote") ) so it doesn't have any jQuery method.但是您正在使用香草 Javascript （ document.getElementsByClassName("newQuote") ）选择您的按钮，因此它没有任何 jQuery 方法。 Besides, getElementsByClassName returns a list of elements, not one element, so you have to iterate them.此外， getElementsByClassName返回一个元素列表，而不是一个元素，因此您必须迭代它们。
Solution: use jQuery to select your button.解决方案：使用 jQuery 到 select 您的按钮。
Also, why use inline JS ( onclick="showquote()" )?另外，为什么要使用内联 JS（ onclick="showquote()" ）？ Use a jQuery click handler.使用 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>
解决方案3
0 2021-02-10 15:30:10
The OP's main problem with remove ing a button is that... OP remove按钮的主要问题是......
button = document.getElementsByClassName("newQuote");
... does not assign an HTMLElement to button but anHTMLCollection ... have a look at getElementsByClassName . ...不会将HTMLElement分配给button ，而是HTMLCollection ...看看getElementsByClassName 。
One might think about having an easier or more generic way of accessing an element which did trigger a certain event.人们可能会考虑使用一种更简单或更通用的方式来访问确实触发了某个事件的元素。
A reliable way is to register events via addEventListener instead of relying on the OP's original inline event handling.一种可靠的方法是通过addEventListener注册事件，而不是依赖于 OP 的原始内联事件处理。 Then one either uses the currentTarget of an event-handler's Event object or one uses the handler's this context which also represent the triggering event target.然后使用事件处理程序的Event object的currentTarget或使用处理程序的this上下文，它也表示触发事件目标。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.