4

Como identificar com JavaScript, se o usuário removeu uma div da pagina pelo, inspetor de elemento, ou seja, se o id do elemento não existe mais na pagina, executar uma ação.

Exemplo simples:

  • Se for removida a <div id="teste>, document.getElementById("algum-id").innerHTML = ""
4
  • Vishe, parando pra pensar agora, você quer detectar em tempo real se o elemento foi excluido, né?
    – JassRiver
    Commented 18/08/2018 às 14:56
  • Exatamente em tempo real, onload é bom simples e não é o que eu procuro..
    – Mark Vaaz
    Commented 18/08/2018 às 14:57
  • 2
    Se o objetivo é perceber no momento que um determinado elemento foi removido então o caminho é utilizar MutationObserver. Pela pergunta para mim não ficou muito claro
    – Isac
    Commented 18/08/2018 às 14:59
  • @Isac Isso dai resolve o problema dele sim, fora que já está explicado na página da própria função, responda com o link que está correto.
    – JassRiver
    Commented 18/08/2018 às 15:00

1 Resposta 1

7

Se pretende perceber quando o DOM é alterado deve utilizar MutationObserver. Este permite definir um callback que executa sempre que houver uma alteração num determinado elemento e respetivos descendentes.

Para o exemplo o ideal é definir a observação no elemento pai daquele que pretende remover, e escutar pela remoção dos filhos, verificando se algum filho é o <div id="teste">.

O remover dos filhos é dado pela propriedade removedNodes da alteração que foi feita, que é uma lista dos nós que foram removidos no DOM. Basta verificar se o id daquele que você está interessado lá existe nessa lista.

Exemplo (adaptado da documentação):

document.getElementById("remover").addEventListener("click", function() {
  document.getElementById("conteudo").innerHTML = "";
});

//no pai do que pretende escutar as alterações
const targetNode = document.getElementById('conteudo'); 
const config = { childList: true, subtree: true};

const observer = new MutationObserver(function(mutationsList) {
  for (let mutation of mutationsList) { //para cada uma das alterações no DOM
    if (mutation.type == 'childList') { //se afeta os filhos
      const removedIds = [...mutation.removedNodes].map(x => x.id); //apanhar os id's
      if (removedIds.includes("teste")){ //se o id existe é porque foi removido
        console.log("teste removido");
      }
    }
  }
}); 

observer.observe(targetNode, config);
<div id="conteudo">
  <div id="teste">Div teste aqui</div>
</div>
<button id="remover">Remover</div>

Se em determinada altura já não precisar mais de escutar eventos com este observador, deve desligar a escuta através de:

observer.disconnect();

Para não pesar na página observando alterações que já não está mais interessado.

1
  • Nossa...........
    – Lollipop
    Commented 20/08/2018 às 12:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .