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.