Zaz
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 primero al nodo principal me parece un poco extraño, ¿hay alguna razón por la que JavaScript funcione así?
johan dettmar
Sé que aumentar las funciones DOM nativas no siempre es la mejor solución 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 anteriores. Para obtener más información sobre cómo extender el DOM, lea esto artículo.
EDITAR: Revisando mi respuesta en 2019, node.remove() ha venido al rescate y se puede usar de la siguiente manera (sin el polirelleno 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). Leer más sobre MDN.
¿No debería ser [ document.getElementsByClassName(“my-elements”)[0].retirar(); ]Creo que las matrices no implementan la función remove(). Para eliminar todos los elementos de una clase o cualquier selector que devuelva una matriz, debe iterar a través de todos los elementos y llamar a remove() en cada uno.
– Sedat Kilinc
21 de diciembre de 2014 a las 17:17
@SedatKilinc, ¿probaste el fragmento real? No hay arreglos involucrados, sino más bien NodeList o HTMLCollection que son un conjunto de elementos en forma de matriz. La definición del segundo método permite eliminar estos “conjuntos de elementos”.
– Johan Dettmar
8 de enero de 2015 a las 15:48
Ejecutar esto en la consola de Chrome solo parece eliminar un elemento a la vez cuando se usa document.getElementsByClassName("my-elements").remove();. Editar: en realidad elimina un montón pero requiere volver a ejecutarlo para finalizar. Pruébalo en esta página con la clase “comentario-copia”.
– DanielST
7 julio 2015 a las 15:33
@slicedtoad tienes razón, mi error. Modifiqué la función para recorrer hacia atrás los elementos. Parece funcionar bien. Lo más probable es que el comportamiento del que está hablando se deba a índices actualizados.
– Johan Dettmar
8 de julio de 2015 a las 14:07
No hagas esto. Simplemente elimine los elementos de la forma prevista en el idioma. Cualquiera que esté familiarizado con el análisis de XML reconocerá la necesidad de llegar al padre para eliminar los hijos. HTML es un superconjunto de XML (más o menos).
– Hal50000
2 de noviembre de 2016 a las 1:30
usuario2192293
Navegador cruzado e IE >= 11:
document.getElementById("element-id").outerHTML = "";
Esta parece la solución más simple, confiable y rápida. No necesito eliminar el elemento, así que omito la última línea, pero eso no debería agregar ninguna sobrecarga de ninguna manera. Nota: Encontré esto mientras intentaba encontrar un más rápido que $.ready js alternativa a noscript etiquetas Para usarlo como quería, tuve que envolverlo en 1ms setTimeout función. Esto resuelve todos mis problemas a la vez. Gracias.
– dgo
1 mayo 2014 a las 18:18
Tenga en cuenta outerHTML sigue siendo una nueva adición al estándar. Si está buscando soporte para cualquier software >6 al momento de escribir, necesitará otra solución. los remove La función mencionada por otros es un caso similar. Como de costumbre, es seguro implementar un polyfill.
– Super gato
10/08/2016 a las 21:31
Esto es un poco más lento que removeChild (alrededor del 6-7% en mi sistema). Ver jsperf.com/clear-outerhtml-v-removechild/2
–Alejandro García Iglesias
24 de junio de 2019 a las 5:58
Esto podría dejar un espacio donde solía estar un iframe si eso es lo que está tratando de eliminar.
– lacostenycoder
13 de marzo de 2020 a las 18:37
hola @dgo, eres genial!
– ChethiyaKD
17 de julio de 2021 a las 20:22
xsznix
podrías hacer un remove para que no tengas que pensar en ello cada vez:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
Si desea una sola línea sin volverse global, puede cambiar elem para remove.elem. De esa manera, la función se referencia a sí misma, por lo que no tiene que crear otra variable global. 🙂
– twiz
27 de diciembre de 2012 a las 5:35
Entonces, ¿por qué necesitas devolver el elemento? Por qué no function remove(id) { document.getElementById(id).parentNote.removeChild(document.getElementById(id)); }
– Zach Lysobey
12/04/2013 a las 17:00
@ZachL: Si bien su solución puede parecer la más obvia, realiza dos búsquedas de DOM que son más lentas y algo que las otras soluciones parecen querer evitar.
– Semana_de_Angmar
1 de julio de 2013 a las 23:39
No funciona. Demasiados errores. Esto funciona: var elem = document.getElementById(‘id’) ; elem.parentNode.removeChild(elem);
– Partido de Mitch
22 de enero de 2016 a las 13:01
Wow, por qué tan complicado. Simplemente pase el elemento en sí mismo a la función en lugar de una cadena de identificación. De esta manera, el elemento es accesible en toda la función y además se mantiene en una sola línea.
– David Fariña
29 de septiembre de 2016 a las 8:52
Zaz
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(). Esta funciona en el 96% de los navegadores (a partir de 2020), pero no IE 11. Si necesita admitir navegadores más antiguos, puede:
Es lo que admite el DOM. Busque en esa página “eliminar” o “eliminar” y removeChild es el único que elimina un nodo.
Eso responde a mi pregunta original, pero ¿por qué JavaScript funciona así?
– Zaz
16 de agosto de 2010 a las 18:18
Solo estoy adivinando aquí, pero supongo que tiene que ver con la gestión de la memoria. Lo más probable es que el nodo principal contenga una lista de punteros a los nodos secundarios. Si acaba de eliminar un nodo (sin usar el elemento principal), el elemento principal aún mantendría el puntero y causaría una pérdida de memoria. Entonces, la API lo obliga a llamar a una función en el padre para eliminar al hijo. esto también es bueno porque puede recorrer el árbol hacia abajo a través de los nodos secundarios llamando a eliminar en cada uno de ellos, y sin fugas de memoria.
– Chadams
2 mayo 2013 a las 16:22
Hola chicos, a pesar de que esa referencia no tiene esto, lo encontré accidentalmente. escribiendo element.remove(); trabajará. Tal vez sea algo nuevo. Pero la primera vez para mí y funciona. Creo que debería haber funcionado siempre, ya que es muy básico y debe tener cosas.
– Muhammad Umer
9 de julio de 2013 a las 23:31
Pero no funciona en IE7 e inferior. Desde IE7 y versiones anteriores, remove() no funciona
– fanfan1609
13 de febrero de 2014 a las 2:36
Si tuviera que adivinar, la razón por la que funciona así es que los elementos DOM no se pueden eliminar solos. Estás quitando la alfombra proverbial de debajo de sus pies. Tienes que sacarlo del contenedor. Al menos así es como trato de pensar en ello.
– PhilT
17 de febrero de 2015 a las 7:51
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]);
Eso responde a mi pregunta original, pero ¿por qué JavaScript funciona así?
– Zaz
16 de agosto de 2010 a las 18:18
Solo estoy adivinando aquí, pero supongo que tiene que ver con la gestión de la memoria. Lo más probable es que el nodo principal contenga una lista de punteros a los nodos secundarios. Si acaba de eliminar un nodo (sin usar el elemento principal), el elemento principal aún mantendría el puntero y causaría una pérdida de memoria. Entonces, la API lo obliga a llamar a una función en el padre para eliminar al hijo. esto también es bueno porque puede recorrer el árbol hacia abajo a través de los nodos secundarios llamando a eliminar en cada uno de ellos, y sin fugas de memoria.
– Chadams
2 mayo 2013 a las 16:22
Hola chicos, a pesar de que esa referencia no tiene esto, lo encontré accidentalmente. escribiendo element.remove(); trabajará. Tal vez sea algo nuevo. Pero la primera vez para mí y funciona. Creo que debería haber funcionado siempre, ya que es muy básico y debe tener cosas.
– Muhammad Umer
9 de julio de 2013 a las 23:31
Pero no funciona en IE7 e inferior. Desde IE7 y versiones anteriores, remove() no funciona
– fanfan1609
13 de febrero de 2014 a las 2:36
Si tuviera que adivinar, la razón por la que funciona así es que los elementos DOM no se pueden eliminar solos. Estás quitando la alfombra proverbial de debajo de sus pies. Tienes que sacarlo del contenedor. Al menos así es como trato de pensar en ello.
– PhilT
17 de febrero de 2015 a las 7:51
Sai Sunder
solo puedes usar element.remove()
element.remove() no es JavaScript válido y solo funciona en ciertos navegadores como Chrome.
– Zaz
1 de marzo de 2014 a las 13:32
Josh, es javascript válido, excepto que solo Firefox y Chrome lo implementaron (Ver MDN)
– Tim Nguyen
13 de junio de 2014 a las 8:04
Mi error, element.remove() es JavaScript válido con DOM4y funciona en todos los navegadores modernos, naturalmente con la excepción de Internet Explorer.
– Zaz
9 de julio de 2014 a las 19:07
Funciona bien en Firefox y Chrome. a quien le importa IE
– Arun Sharma
5 de octubre de 2014 a las 6:29
¡las personas con trabajo se preocupan por IE!
– metro cuadrado
1 de junio de 2015 a las 4:46
Como dijo James, el DOM no admite la eliminación de un objeto directamente. Tienes que ir a su padre y eliminarlo de allí. Javascript no permitirá que un elemento se suicide, pero sí permite el infanticidio…
–Mark Henderson
1 de agosto de 2010 a las 23:36
¿Hay una razón? Richard Feynman dice que no. (Bueno, la justificación técnica es fácil de ver si ha escrito algún programa con estructura de árbol. El niño debe informar al padre de todos modos de lo contrario, la estructura de árbol puede romperse. Dado que debe hacerlo internamente de todos modos, si le proporcionó una función de una línea, es solo una función conveniente para usted que también puede definir usted mismo).
– kizzx2
9 de enero de 2012 a las 3:56
La única razón por la que veo es que siempre debe haber un elemento raíz en un documento xml/xhtml, por lo que no podrá eliminarlo porque no tiene un padre.
– Alex K.
16 de octubre de 2012 a las 8:38
Me gusta bastante la solución alternativa de Johan, y no estoy seguro de por qué esas funciones no se proporcionan de forma nativa. Como demuestra el número de espectadores, es una operación muy habitual.
– Zaz
12 de agosto de 2013 a las 13:36
Puedes usar
element.remove()directamente a partir de ES5. ¡No necesitas a los padres!– Gibolt
13 de agosto de 2017 a las 5:14