Remove element by id

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.

Crossbrowser and IE >= 11:

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

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