Como remover um elemento HTML pelo JavaScript

No Javascript, para remover um elemento HTML é preciso antes de tudo pegar a referência do elemento "pai" que envolve o elemento a ser removido. Para isso, usamos o atributo elemento.parentElement. Em seguida, tendo a referência do elemento "pai", podemos utilizar a função .removeChild(elemento). Veja o exemplo a seguir:

// Pega a referência do elemento pai do elemento a ser removido
var elemento = document.getElementById('idDoElemento')

// Remove o elemento em questão
elemento.parentElement.removeChild(elemento)

Simples, não é mesmo? Caso ainda tenha alguma dúvida sobre isso deixe seu comentário no final do artigo!

Criando uma função JavaScript para remover o elemento HTML:

Agora, podemos criar uma função que facilitará a vida do programador. Sempre que precisar pode chamar pelo removerElemento() para remover o elemento desejado. Veja a seguir como ficou a função:

// Função para remover um elemento HTML com base em um seletor CSS
function removeElemento(query) {
  // Pega o elemento usando o seletor
  var el = document.querySelector(query)

  // Se o elemento não foi encontrado finaliza a função
  if (!el)
    return

  // Remove o elemento
  el.parentElement.removeChild(el)
}

Esta função removerElemento(query) pode ser utilizada para remover elementos com base em um seletor CSS. Por exemplo, se você deseja remover um elemento com um determinado ID, pode chamar a função da seguinte maneira:

removerElemento("#idDoElemento");

Portanto, a remoção de elementos HTML usando JavaScript é uma tarefa simples e essencial para a manipulação dinâmica de páginas web. Ao utilizar a função removerElemento() que criamos, os programadores podem facilmente eliminar elementos específicos de suas páginas, tornando a experiência do usuário mais dinâmica e fluida. Lembrando sempre de verificar se o elemento existe antes de tentar removê-lo, garantimos a eficácia e segurança do código. Continue aprimorando suas habilidades em JavaScript e explore outras funcionalidades para tornar suas aplicações web ainda mais poderosas e interativas.