Remove a button with javascript

Question

I am trying to remove a button after it is clicked (the button was created in javascript) and from a different post it said this code would work, but in my console i get the error:

Uncaught TypeError: Cannot read property 'remove' of null
at HTMLUnknownElement.<anonymous> (RBrOJeLwYgRM:335)

Why? Help! Code:

Code that is supposedly going to remove elements:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

My code which activates the remove function:

else if (PaintBrush.crashWith(Finish)) {
      PaintBrush.y = 50;
      var button = document.createElement("button2");
button.innerHTML = "Level 2";
      var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
      GameArena.clear();
      GameArena.stop();
      button.addEventListener ("click", function() {
  startGame2();
        document.getElementById("button-2").remove();
});

Are you trying to remove the document.createElement("button2") button? Are you trying to create an element with a button2 tag or a button with an id of button2? — litel
– litel, Commented Feb 24, 2017 at 21:02
Why? Because you're trying to access .remove of null, just like the console error says. where are you calling .remove(), what are you calling .remove() on, and why do you think it might be null? — Dan O
– Dan O, Commented Feb 24, 2017 at 21:04

Luis Carlos Arellano Ochoa · Accepted Answer · 2017-02-24 21:24:12Z

1

Try these changes

PaintBrush.y = 50;
var button = document.createElement("button"); //  remove the "2"
button.innerHTML = "Level 2";
button.id = "button-2";  // add the id to the button
document.body.appendChild(button); // append to body
GameArena.clear();
GameArena.stop();
button.addEventListener ("click", function() {
  startGame2();
  document.getElementById("button-2").remove();
});

answered Feb 24, 2017 at 21:24

Luis Carlos Arellano Ochoa

5584 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TechEndling Over a year ago

Works! Thanks! Really helpful, i had named it button2 because i had some css to position it, but creating a css id called button-2 and styling that works aswell. Thanks again!

Luis Carlos Arellano Ochoa Over a year ago

Glad it helped, If you want to keep the "button2" class, you cand add it also, just use: button.className = "button2";

Collectives™ on Stack Overflow

Remove a button with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related