Eliminar elemento por id
Al eliminar un elemento con JavaScript estándar, primero debes ir a su elemento principal:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Tener que ir primero al nodo principal 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 solución ni 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 inferiores. Para obtener más información sobre cómo ampliar el DOM, lea este artículo .
EDITAR : Al revisar mi respuesta en 2019, node.remove()vino al rescate y se puede usar de la siguiente manera (sin el polyfill anterior):
document.getElementById("my-element").remove();
o
[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());
Estas funciones están disponibles en todos los navegadores modernos (excepto IE). Lea más en MDN .
Navegador cruzado e IE >= 11:
document.getElementById("element-id").outerHTML = "";
Podrías crear una removefunción para no tener que pensar en ella cada vez:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
Actualización 2011
Esto se agregó a la especificación DOM en 2011 , por lo que puedes usar:
element.remove()
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. Entonces element.parentNode.removeChild(element)imita exactamente lo que está sucediendo internamente: primero va al nodo principal, luego elimina la referencia al nodo secundario.
A partir de DOM4, se proporciona una función auxiliar para hacer lo mismo: element.remove(). Esto funciona en el 96% de los navegadores (a partir de 2020), pero no en IE 11.
Si necesita admitir navegadores más antiguos, puede :
- Eliminar elementos a través del nodo padre
- Modifique las funciones DOM nativas, como en la respuesta de Johan Dettmar , o
- Utilice un polirelleno DOM4 .