Remova todos os elementos filhos usando JavaScript

Remover elementos filhos de um elemento DOM é uma tarefa crítica para os desenvolvedores. Às vezes, o usuário deve adicionar um recurso que remova todos os dados da lista inserida. JavaScript facilita para os desenvolvedores, fornecendo métodos predefinidos para fazer a mesma coisa.

Este tutorial explicará os métodos para remover todos os elementos filhos de um elemento HTML usando JavaScript.

Como remover todos os elementos filhos usando JavaScript?

Para remover todos os elementos filhos, use as seguintes abordagens JavaScript

• Método removeChild ()
• Propriedade Innerhtml

Vamos entender o funcionamento dessas abordagens individualmente.

Método 1: Remova todos os elementos filhos usando o método removeChild ()

O "removechild ()”O método é o método JavaScript mais comum para remover os elementos filhos dos elementos DOM. Itera os elementos dom com um tempo ou um loop. Em cada iteração, ele verifica se há algum nó infantil no elemento e, em caso afirmativo, ele simplesmente o remove.

Sintaxe
Siga a sintaxe mencionada abaixo para o método removeChild () para remover elementos filhos de qualquer elemento HTML:

RemoveChild (criança)

Aqui, "criança”É o nó infantil do elemento a ser removido.

Exemplo
Primeiro, crie uma lista não ordenada em um arquivo HTML usando o HTML

Tag, os itens da lista
• são os elementos infantis da lista não ordenada. Em seguida, crie um botão anexando um “ONCLICK”Evento para ele, que desencadeará uma função para remover os nós filhos do elemento“ul”:
  
  
  
  
  • OOP
  
  
  • Html
  
  
  • CSS
  
  
  • JavaScript
  
  
  
  
  Remova os elementos filhos da lista não ordenada
  

  Para estilizar a lista não ordenada, o seguinte código CSS é usado:

  .ul
  Exibição: bloco embutido;
  Alinhamento de texto: esquerda;
  

  A página HTML será:

  No arquivo JavaScript, use o código a seguir para remover todos os nós filhos do elemento:

  função removeChildElements ()
  var ChildElements = documento.QuerySelector ("Ul");
  var delchild = ChildElements.LastChild;
  while (delchild)
  Crianças.removechild (delchild);
  DelChild = ChildElements.LastChild;
  
  

  No código acima:

  • Primeiro, defina uma função “RemoveChildElements ()”.
  • Obtenha o elemento html “ul”Usando o“QuerySelector ()”Método.
  • Itera o elemento até o último nó filho e remova todos eles usando o “removechild ()”Método.

  Saída

  A saída acima indica que todos os itens da lista estão sendo excluídos com sucesso quando o botão é clicado.

  Para remover, apenas o primeiro nó filho do elemento, use as linhas de código abaixo:

  função removeChildElements ()
  var ChildElements = documento.QuerySelector ("Ul");
  Crianças.RemoveChild (ChildElements.primeiro filho);
  

  No trecho de código acima

  • Obtenha o elemento html “ul”E passe o primeiro filho para o“removechild ()”Método como argumento.

  Saída

  O primeiro elemento infantil da lista não ordenada é o único removido na saída vista acima.

  Método 2: Remova todos os elementos filhos usando a propriedade Innerhtml

  Outra abordagem para remover todos os nós filhos de qualquer elemento é o “Innerhtml" propriedade.

  Sintaxe
  A sintaxe a seguir é usada para a propriedade Innerhtml:

  INNERHTML = "

  A string vazia é definida para a propriedade Innerhtml que removerá todos os nós filhos do elemento.

  Exemplo
  O código abaixo é usado para remover nós filhos usando a propriedade InnerHTML:

  função removeChildElements ()
  var ChildElements = documento.QuerySelector ("Ul");
  Crianças.inerhtml = "";
  

  Saída

  Reunimos as melhores abordagens possíveis para remover os nós filhos de um elemento usando JavaScript.

  Conclusão

  Para remover todos os elementos filhos de um elemento DOM, use o “removechild ()”Método ou o“Innerhtml" propriedade. O método removeChild () é um método eficaz e comumente usado para remover o nó filho do elemento. A propriedade Innerhtml é a técnica mais simples. No entanto, isso mostra que os itens são removidos, mas os nós permanecem por dentro, desacelerando as coisas. Este tutorial explicou os métodos para remover todos os elementos filhos de um elemento HTML através de JavaScript.