Remove element by id

Remove element by id

When removing an element with standard JavaScript, you must go to its parent first:
var element = document.getElementById(“element-id”);
element.parentNode.removeChild(element);

Having to go to the parent node first seems a bit odd to me, is there a reason JavaScript works like this?

Solutions/Answers:

Solution 1:

I know that augmenting native DOM functions isn’t always the best or most popular solution, but this works fine for modern browsers.

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]);
        }
    }
}

And then you can remove elements like this

document.getElementById("my-element").remove();

or

document.getElementsByClassName("my-elements").remove();

Note: this solution doesn’t work for IE 7 and below. For more info about extending the DOM read this article.

EDIT: Reviewing my answer in 2019, node.remove() has come to the rescue and can be used as follows (without the polyfill above):

document.getElementById("my-element").remove();

or

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

These functions are available in all modern browsers (not IE). Read more on MDN.

Solution 2:

Crossbrowser and IE >= 11:

document.getElementById("element-id").outerHTML = "";

Solution 3:

You could make a remove function so that you wouldn’t have to think about it every time:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Solution 4:

It’s what the DOM supports. Search that page for “remove” or “delete” and removeChild is the only one that removes a node.

Solution 5:

The DOM is organized in a tree of nodes, where each node has a value, along with a list of references to its child nodes. So element.parentNode.removeChild(element) mimics exactly what is happening internally: First you go the the parent node, then remove the reference to the child node.

As of DOM4, a helper function is provided to do the same thing: element.remove(). This works in 87% of browsers (as of 2016), but not IE 11. If you need to support older browsers, you can:

Solution 6:

For removing one element:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

For removing all the elements with for example a certain class name:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);