Eliminar elemento por id

Al eliminar un elemento con JavaScript estándar, primero debe ir a su padre:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Tener que ir al nodo principal 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 solución o la más popular, pero esto 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 extender el DOM, lea este artículo .

EDITAR : Revisando mi respuesta en 2019, node.remove()ha venido 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 (no en IE). Lea más sobre MDN .

Crossbrowser e IE> = 11:

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

Puede hacer una removefunción para no tener 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 removeChild 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. Entonces element.parentNode.removeChild(element)imita exactamente lo que está sucediendo internamente: primero va al nodo primario, luego elimina la referencia al nodo secundario.

A partir de DOM4, se proporciona una función de ayuda a hacer la misma cosa: element.remove(). Esto funciona en el 87% de los navegadores (a partir de 2016), pero no en IE 11. Si necesita admitir navegadores antiguos, puede:

• Eliminar elementos a través del nodo principal, como en la pregunta ,
• modificar las funciones DOM nativas, como en la respuesta de Johan Dettmar , o
• use un DOM4 polyfill .

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

puedes usar element.remove()

El ChildNode.remove()método elimina el objeto del árbol al que pertenece.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Aquí hay un violín que muestra cómo puedes llamar document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

** **

No hay necesidad de extender NodeList. Ya se ha implementado.

** **

Puede eliminar directamente ese elemento utilizando el remove()método de DOM.

Aquí hay un ejemplo:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

De acuerdo con las especificaciones DOM nivel 4, que es la versión actual en desarrollo, hay algunos nuevos métodos de mutación mano disponibles: append(), prepend(), before(), after(), replace(), y remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Tener que ir al nodo principal primero me parece un poco extraño, ¿hay alguna razón por la que JavaScript funcione así?

El nombre de la función es removeChild(), y ¿cómo es posible eliminar al hijo cuando no hay padre? :)

Por otro lado, no siempre tiene que llamarlo como lo ha mostrado. element.parentNodees solo un ayudante para obtener el nodo padre del nodo dado. Si ya conoce el nodo padre, puede usarlo así:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

Para agregar algo más:

Algunas respuestas han señalado que en lugar de usar parentNode.removeChild(child);, puedes usar elem.remove();. Pero como he notado, hay una diferencia entre las dos funciones, y no se menciona en esas respuestas.

Si lo usa removeChild(), devolverá una referencia al nodo eliminado.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Pero si lo usa elem.remove();, no le devolverá la referencia.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Este comportamiento se puede observar en Chrome y FF. Creo que vale la pena notar :)

Espero que mi respuesta agregue algo de valor a la pregunta y sea útil.

Las funciones que usan ele.parentNode.removeChild (ele) no funcionarán para los elementos que ha creado pero que aún no se han insertado en el HTML. Las bibliotecas como jQuery y Prototype utilizan sabiamente un método como el siguiente para evadir esa limitación.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Creo que JavaScript funciona así porque los diseñadores originales del DOM consideraban que la navegación padre / hijo y la navegación anterior / siguiente eran una prioridad más alta que las modificaciones DHTML que son tan populares hoy en día. Poder leer de un <input type = 'text'> y escribir en otro por ubicación relativa en el DOM fue útil a mediados de los 90, un momento en que la generación dinámica de formularios HTML completos o elementos de GUI interactivos apenas era un centelleo El ojo de algún desarrollador.

Tener que ir al nodo principal primero me parece un poco extraño, ¿hay alguna razón por la que JavaScript funcione así?

En mi humilde opinión: La razón de esto es la misma que he visto en otros entornos: está realizando una acción basada en su "enlace" a algo. No puede eliminarlo mientras está vinculado a él.

Como cortar la rama de un árbol. Siéntese en el lado más cercano al árbol mientras corta o el resultado será ... desafortunado (aunque divertido).

Este en realidad proviene de FireFox ... por una vez, IE estaba por delante del paquete y permitió la eliminación de un elemento directamente.

Esto es solo mi suposición, pero creo que la razón por la que debe eliminar a un niño a través de los padres se debe a un problema con la forma en que FireFox manejó la referencia.

Si llamas a un objeto para cometer hari-kari directamente, inmediatamente después de que muera, aún tienes esa referencia. Esto tiene el potencial de crear varios errores desagradables ... como no eliminarlo, eliminarlo pero mantener referencias que parecen válidas o simplemente una pérdida de memoria.

Creo que cuando se dieron cuenta del problema, la solución fue eliminar un elemento a través de su elemento primario porque cuando el elemento desapareció, ahora simplemente tiene una referencia al elemento primario. Esto detendría toda esa molestia y, por ejemplo, si se cierra un árbol nodo por nodo, se 'cerraría' bastante bien.

Debería ser un error fácilmente reparable, pero al igual que con muchas otras cosas en la programación web, el lanzamiento probablemente se apresuró, lo que llevó a esto ... y cuando llegó la próxima versión, suficientes personas lo estaban usando para cambiar esto. a romper un montón de código.

Nuevamente, todo esto es simplemente mi conjetura.

Sin embargo, espero con ansias el día en que la programación web finalmente obtenga una limpieza completa de primavera, se limpien todas estas pequeñas idiosincrasias extrañas y todos comiencen a jugar con las mismas reglas.

Probablemente el día después de que mi criado robot me demanda por salarios atrasados.

Por lo que entiendo, eliminar un nodo directamente no funciona en Firefox, solo Internet Explorer. Por lo tanto, para admitir Firefox, debe ir al padre para eliminar su hijo.

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

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

Esta es la mejor función para eliminar un elemento sin error de script:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Nota a EObj=document.getElementById(EId).

Este es UN signo igual no ==.

si EIdexiste un elemento , la función lo elimina; de lo contrario, devuelve falso, no error.