javascript - obtener - Eliminar elemento por id

getelementsbytagname javascript ejemplo

Question

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 de esta manera?

Answer 1

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

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

Por otro lado, no siempre tiene que llamarlo como se muestra. element.parentNode es solo un ayudante para obtener el nodo primario 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);

removeChild

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

Para añadir algo más:

Algunas respuestas han señalado que, en lugar de utilizar 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 usa removeChild() , devolverá una referencia al nodo eliminado.

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

Pero si usas elem.remove(); , no te 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 darse cuenta :)

Espero que mi respuesta agregue algo de valor a la pregunta y será de ayuda!

Answer 2

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

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

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

Answer 3

Crossbrowser y IE> = 11:

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

Answer 4

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

http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/

Answer 5

El DOM se organiza en un árbol de nodos, donde cada nodo tiene un valor, junto con una lista de referencias a sus nodos secundarios. Así que element.parentNode.removeChild(element) imita exactamente lo que está sucediendo internamente: primero, vaya al nodo principal y luego elimine 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 87% de los navegadores (a partir de 2016), pero no en IE 11. Si necesita admitir navegadores más antiguos, puede:

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

Answer 6

El método ChildNode.remove() 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 a document.getElementById(''my-id'').remove()

https://jsfiddle.net/52kp584L/

**

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

**

Answer 7

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 para EObj=document.getElementById(EId) .

Este es UN signo igual no == .

si el elemento EId existe, la función lo elimina; de lo contrario, devuelve falso, no error .

Answer 8

Este realmente 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 un hijo a través del padre se debe a un problema con la forma en que FireFox manejó la referencia.

Si llama a un objeto para cometer hari-kari directamente, inmediatamente después de que muera, todavía tiene esa referencia en él. Esto tiene el potencial de crear varios errores desagradables ... como fallar al eliminarlo, eliminarlo pero manteniendo las referencias que parecen válidas, o simplemente una pérdida de memoria.

Creo que cuando se dieron cuenta del problema, el problema consistió en eliminar un elemento a través de su elemento primario porque cuando el elemento desaparece, ahora simplemente está sosteniendo una referencia al elemento principal. Esto detendría todo lo desagradable, y (si cierra un árbol por nodo, por ejemplo) se "comprimiría" bastante bien.

Debería ser un error fácilmente solucionable, pero al igual que con muchas otras cosas en la programación web, el lanzamiento probablemente fue apresurado, lo que llevó a esto ... y cuando llegó la próxima versión, hubo suficiente gente que lo cambiaría. para romper un montón de código.

Una vez más, todo esto es simplemente mi conjetura.

Sin embargo, espero con ansias el día en que la programación web finalmente se limpie por completo, todas estas pequeñas idiosincrasias se limpien y todos empiecen a jugar con las mismas reglas.

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

Answer 9

Las funciones que utilizan ele.parentNode.removeChild (ele) no funcionarán para los elementos que haya creado pero que aún no se hayan 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 de DOM mantuvieron la navegación principal / secundaria y la navegación anterior / siguiente como una prioridad más alta que las modificaciones de DHTML que son tan populares hoy en día. Poder leer desde 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 el que la generación dinámica de formularios HTML completos o elementos de la GUI interactiva fue apenas un brillo en Ojo de algún desarrollador.

Answer 10

Para eliminar un elemento:

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

Para eliminar todos los elementos con, por ejemplo, un determinado nombre de clase:

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

Answer 11

Podría hacer una función de remove para que no tuviera que pensar en ello cada vez:

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

Answer 12

Por lo que entiendo, la eliminación de un nodo directamente no funciona en Firefox, solo Internet Explorer. Entonces, para ser compatible con Firefox, tienes que ir al padre para eliminar a su hijo.

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

Answer 13

Sé que aumentar las funciones nativas de DOM 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 anteriores. Para más información sobre la extensión del DOM lea este article .

Answer 14

puedes usar element.remove()

Answer 15

Es lo que el DOM soporta . Busque en esa página "eliminar" o "eliminar" y removeChild es el único que elimina un nodo.

Answer 16

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