Remove Button on click

Question

I want to remove the button itself onclick. Can someone help me.

HTML:

<div id="hideButton">
    <a onclick="removeButton()" class="button1">PRESS</a>
</div>

Java Script:

function removeButton() {
    var element = document.getElementsById("hidebutton");
    element.classList.remove("button1");
  }

Every help is much appreciated :)

`document.getElementById` not `document.getElementsById` (no s) — Kinglish, Jun 28 '21 at 07:19
Does this answer your question? [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — Parzival, Jul 20 '21 at 15:30

score 0 · Answer 1 · answered Jun 28 '21 at 07:15

0

Use JavaScript's remove() function.

function removeButton() {
  var button = document.getElementById("hideButton");
  button.remove();
}

<div id="hideButton">
    <a onclick="removeButton()" class="button1">PRESS</a>
</div>

answered Jun 28 '21 at 07:15

ahsan

1,409
8
11

how this will remove button. It will remove complete div. The user wants to remove button on self click. – Amit Verma Jun 28 '21 at 07:20

score 0 · Answer 2 · answered Jun 28 '21 at 07:19

0

HTML

<div id="hideButton">
    <a onclick="removeButton(this)" class="button1">PRESS</a>
</div>

Javascript

function removeButton(buttonCntrl) {            
    buttonCntrl.remove();
}

answered Jun 28 '21 at 07:19

Amit Verma

2,450
2
8
21

note that using `onclick="removeButton(this)"` is bad, using eventListeners are way better – I_love_vegetables Jun 28 '21 at 07:43

score 0 · Answer 3 · answered Jun 28 '21 at 07:25

If you wished to apply this same logic to multiple button1 elements you can use a single external event listener bound to every instance of that class using querySelectorAll to find these elements.

document.querySelectorAll('a.button1').forEach(a=>a.addEventListener('click',function(e){
  this.parentNode.removeChild(this)
}));

.button1{
  border:1px solid black;
  width:120px;
  padding:0.25rem;
}

div{
  margin:1rem;
  width:100%;
}

<div>
    <a href='#' class="button1">PRESS #1</a>
</div>

<div>
    <a href='#' class="button1">PRESS #2</a>
</div>

<div>
    <a href='#' class="button1">PRESS #3</a>
</div>

<div>
    <a href='#' class="button1">PRESS #4</a>
</div>

<div>
    <a href='#' class="button1">PRESS #5</a>
</div>

Remove Button on click

3 Answers3