Eliminar todos los elementos infantiles usando JavaScript

Eliminar elementos infantiles de un elemento DOM es una tarea crítica para los desarrolladores. A veces, se requiere que el usuario agregue una función que elimine todos los datos de la lista insertada. JavaScript facilita a los desarrolladores al proporcionar métodos predefinidos para hacer lo mismo.

Este tutorial explicará los métodos para eliminar todos los elementos infantiles de un elemento HTML usando JavaScript.

Cómo eliminar todos los elementos infantiles usando JavaScript?

Para eliminar todos los elementos infantiles, use los siguientes enfoques de JavaScript

• método removechild ()
• propiedad innerhtml

Entendamos el funcionamiento de estos enfoques individualmente.

Método 1: eliminar todos los elementos infantiles utilizando el método RemoVeChild ()

El "removechild ()"El método es el método JavaScript más común para eliminar los elementos infantiles de los elementos DOM. Iterar los elementos dom con un tiempo o un bucle para un bucle. En cada iteración, verifica para ver si queda algún nodo infantil en el elemento y, de ser así, simplemente lo elimina.

Sintaxis
Siga la sintaxis mencionada a continuación para el método RemoVeChild () para eliminar los elementos infantiles de cualquier elemento HTML:

Removechild (niño)

Aquí, "niño"¿Es el nodo infantil del elemento a eliminar.

Ejemplo
Primero, cree una lista desordenada en un archivo HTML utilizando el HTML

etiqueta, los elementos de la lista
• son los elementos infantiles de la lista desordenada. Luego, cree un botón adjuntando un "al hacer clic"Evento, lo que desencadenará una función para eliminar los nodos infantiles del elemento"ul":
  
  
  
  
  • Oop
  
  
  • Html
  
  
  • CSS
  
  
  • Javascript
  
  
  
  
  Eliminar elementos infantiles de la lista desordenada
  

  Para peinar la lista desordenada, se utiliza el siguiente código CSS:

  .ul
  Pantalla: bloque en línea;
  text-align: izquierda;
  

  La página HTML se verá como:

  En el archivo JavaScript, use el siguiente código para eliminar todos los nodos infantiles del elemento:

  función removeChildelements ()
  var infantilements = documento.QuerySelector ("UL");
  var delchild = infantilementos.último niño;
  while (delchild)
  matrices.Removechild (Delchild);
  Delchild = infantilementos.último niño;
  
  

  En el código anterior:

  • Primero, defina una función "removechildelements ()".
  • Obtenga el elemento HTML "ul" utilizando el "QuerySelector ()" método.
  • Iterar el elemento hasta el último nodo infantil, luego retírelos todos usando el "removechild ()" método.

  Producción

  La salida anterior indica que todos los elementos de la lista se eliminan correctamente cuando se hace clic en el botón.

  Para eliminar, solo el primer nodo secundario del elemento, use las siguientes líneas de código:

  función removeChildelements ()
  var infantilements = documento.QuerySelector ("UL");
  matrices.Removechild (infantilementos.primer hijo);
  

  En el fragmento de código anterior

  • Obtenga el elemento HTML "ul"Y pase el primer nodo infantil al"removechild ()Método como argumento.

  Producción

  El primer elemento secundario de la lista no ordenada es el único eliminado en la salida que se ve arriba.

  Método 2: Elimine todos los elementos infantiles utilizando la propiedad InnerHTML

  Otro enfoque para eliminar todos los nodos infantiles de cualquier elemento es el "innerhtml" propiedad.

  Sintaxis
  La siguiente sintaxis se usa para la propiedad InnerHTML:

  innerhtml = "

  La cadena vacía se establece en la propiedad InnerHTML que eliminará todos los nodos infantiles del elemento.

  Ejemplo
  El código dado a continuación se usa para eliminar nodos infantiles utilizando la propiedad InnerHTML:

  función removeChildelements ()
  var infantilements = documento.QuerySelector ("UL");
  matrices.innerhtml = "";
  

  Producción

  Recopilamos los mejores enfoques posibles para eliminar los nodos infantiles de un elemento usando JavaScript.

  Conclusión

  Para eliminar todos los elementos infantiles de un elemento DOM, use el "removechild ()"Método o el"innerhtml" propiedad. El método removeChild () es un método efectivo y comúnmente utilizado para eliminar el nodo secundario del elemento. La propiedad innerhtml es la técnica más simple. Sin embargo, muestra que los elementos se eliminan, pero los nodos permanecen adentro, desacelerando las cosas. Este tutorial explicó los métodos para eliminar todos los elementos infantiles de un elemento HTML a través de JavaScript.