Quitar elemento por id

10 minutos de lectura

Quitar elemento por id
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í?

  • 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


Quitar elemento por id
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

1646963593 680 Quitar elemento por id
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

1646963594 796 Quitar elemento por id
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

Quitar elemento por id
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:

  • 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
  • utilizar una Relleno de poliéster DOM4.

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


1646963595 585 Quitar elemento por id
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

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad