Al eliminar un elemento con JavaScript estándar, primero debe ir a su elemento primario:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Tener que ir al nodo padre primero me parece un poco extraño, ¿hay alguna razón por la que JavaScript funcione así?
Sé que aumentar las funciones DOM nativas no siempre es la mejor o la más popular, pero funciona bien para los navegadores modernos.
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]);
}
}
}
Y luego puedes eliminar elementos como este
document.getElementById("my-element").remove();
o
document.getElementsByClassName("my-elements").remove();
Nota: esta solución no funciona para IE 7 y versiones posteriores. Para obtener más información sobre cómo extender el DOM, lea esto artículo.
Crossbrowser e IE> = 11:
document.getElementById("element-id").outerHTML = "";
Podrías hacer un remove función para que no tenga que pensar en ello cada vez:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
Es lo que admite el DOM. Busque en esa página "eliminar" o "eliminar" y eliminarChild es el único que elimina un nodo.
El DOM está organizado en un árbol de nodos, donde cada nodo tiene un valor, junto con una lista de referencias a sus nodos secundarios. Asi que element.parentNode.removeChild(element) imita exactamente lo que está sucediendo internamente: Primero ve al nodo padre, luego elimina la referencia al nodo secundario.
A partir de DOM4, se proporciona una función auxiliar para hacer lo mismo: element.remove(). Esta funciona en el 87% de los navegadores (a partir de 2016), pero no IE 11. Si necesita admitir navegadores más antiguos, puede:
Para eliminar un elemento:
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
Para eliminar todos los elementos con, por ejemplo, un nombre de clase determinado:
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]);
solo puedes usar element.remove()