02.12.2024

Adicionando e Removendo Linhas em um Div com JavaScript

Resumo Rápido

// Para adicionar conteúdo, use atribuição com adição:
document.querySelector('#seuDiv').innerHTML += '<p>Adicione este texto</p>';

// Para limpar conteúdo, use uma atribuição simples a uma string vazia:
document.querySelector('#seuDiv').innerHTML = '';

Com innerHTML +=, você pode adicionar conteúdo ao div, e usando innerHTML = '', você pode limpar todo o conteúdo do elemento.

Otimizando a Manipulação do DOM para Melhor Performance

Adição Eficiente de Elementos

A adição eficiente de novos elementos ao DOM pode ser alcançada com os métodos createElement e appendChild:

// createElement – como criar um pequeno milagre:
let novoElemento = document.createElement('div');

// appendChild – como receber calorosamente em nossa família de elementos:
container.appendChild(novoElemento);

Removendo Elementos Sem Efeitos Indesejados

Para remover um elemento, use o método remove a partir do seu nó pai:

// Uma abordagem suave para os elementos:
elementoARemover.parentNode.removeChild(elementoARemover);

Limpeza Cuidadosa

Adicionalmente, certifique-se de remover manipuladores de eventos associados a esse elemento:

// Deixando ir com gratidão:
elementoARemover.removeEventListener('click', seuManipuladorDeEvento);

// E, sem arrependimentos, remova-o:
elementoARemover.remove();

Delegação de Eventos e Gerenciamento de Elementos Dinâmicos

Preste Atenção à Delegação de Eventos

A delegação de eventos permite otimizar o tratamento de eventos no div, economizando recursos:

// Os pais sempre estão certos:
document.getElementById('seuDiv').addEventListener('click', function(event) {
  if (event.target.classList.contains('btn-remover')) {
    // 'Adeus para sempre...' - uma ação mágica em JavaScript
    event.target.closest('.linha').remove();
  }
});

Benefícios de Usar Identificadores

Atribuir identificadores a elementos ajuda a gerenciá-los e estilizar sua apresentação visual:

// Cada elemento é uma raridade impecável...
novoElemento.className = 'conteudo-dinamico';
novoElemento.id = `conteudo-${idUnico}`;

Use identificadores únicos para não se perder no DOM.

Visualização

Veja como fica na prática:

Antes:
[📚,🖼️,🌱]

Adicionando um novo item à prateleira:

document.getElementById('sua-prateleira').innerHTML += '<div>🎮</div>';

Depois:
[📚,🖼️,🌱,🎮]

Removendo um item, e agora ele se foi:

document.getElementById('jogo').remove();

E aqui estão os últimos três:
[📚,🖼️,🌱]

Reorganizando habilidosamente o layout sem recriá-lo!

Técnicas Avançadas e Nuances Importantes

Inserindo HTML em uma Posição Específica Usando insertAdjacentHTML

Use insertAdjacentHTML para colocação precisa de conteúdo:

// A localização é crucial!
document.getElementById('seuDiv').insertAdjacentHTML('beforeend', '<div>E um pouco mais de texto</div>');

Mantendo um Estilo Visual Consistente

Aplique as mesmas classes a elementos adicionados dinamicamente para manter um estilo coerente:

// Vista-se como se todo o DOM fosse seu palco!
novoElemento.classList.add('estilo-consistente');

Funções Úteis para Gerenciamento de Elementos

Simplifique seu código encapsulando a lógica em funções:

// Um mestre em conhecer novos elementos!
function adicionarLinha() { /* Seu código para adicionar uma nova linha aqui */ }

// Um expert na arte das despedidas!
function removerLinha(idLinha) { /* Seu código para remover uma linha aqui */ }

Prevenindo Vazamentos de Memória ao Limpar Manipuladores de Eventos

Desconecte manipuladores de eventos para elementos que já foram removidos para evitar vazamentos de memória:

// 'Você não é bem-vindo aqui, saia!'
document.querySelectorAll('.conteudo-dinamico').forEach(elem => {
  elem.removeEventListener('click', seuManipuladorDeEvento);
});

Recursos Úteis

1. JavaScript HTML DOM - Um ótimo recurso para interagir com o DOM HTML em JavaScript.
2. Introdução ao DOM - Web API | MDN - Tudo que você precisa saber sobre o Modelo de Objeto de Documento.
3. Propriedade Elemento: innerHTML - Web API | MDN - Informações detalhadas sobre manipulação de HTML através da propriedade innerHTML.
4. Método Node: appendChild() - Web API | MDN - Um tutorial sobre adicionar nós filhos a elementos.
5. Método Elemento: insertAdjacentHTML() - Web API | MDN - Discussão profunda sobre inserção de HTML relativo aos nós dos elementos.
6. Método Node: removeChild() - Web API | MDN - Um guia para remover elementos do DOM.
7. É possível anexar ao innerHTML sem destruir os manipuladores de eventos dos descendentes? - Stack Overflow - Uma discussão sobre a modificação de innerHTML sem bagunçar os manipuladores de eventos.

Video

Navigation