Skip to main content
5 de 5
adicionou 23 caracteres ao conteúdo
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Apesar do novo botão ser um elemento com a mesma tag, classe e conteúdo, ele não é o mesmo elemento, e portanto ele não tem o evento de clique que o elemento original tinha.

Veja aqui como o botão muda depois que você o remove e adiciona outro:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = '<button class="btn">Clique-me</button>';

button.addEventListener('click', (e) => {
    // antes de remover, o botão dentro de "app" é o mesmo que "button"
    console.log(app.querySelector('button') === button); // true
    app.innerHTML = '';
    app.insertAdjacentHTML('beforeend',newButton);
    // depois de remover e adicionar outro, o botão dentro de "app" não é mais o mesmo que "button"
    console.log(app.querySelector('button') === button); // false
});
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Depois de clicar no botão, ele vai mostrar no console true (pois o botão que está dentro da div é o original) e depois false (pois o novo botão que foi inserido não é mais o mesmo elemento - ou seja, se clicar na segunda vez ele já não imprime mais nada, pois o novo botão não tem nenhum evento de clique associado).

Segundo a documentação de insertAdjacentHTML, é feito o parsing do HTML e os nós resultantes deste parsing são inseridos no DOM. O que acontece é que esses nós novos não tem nenhuma relação com os anteriores (mesmo que o conteúdo do HTML seja idêntico).


Solução

Em vez de adicionar o evento no botão, uma alternativa é usar event delegation e colocar o evento na div:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = '<button class="btn">Clique-me</button>';

app.addEventListener('click', (e) => {
    const element = e.target; // pega o elemento que foi clicado
    // verifica se o elemento clicado é o botão que tem a classe btn
    if (element.nodeName == 'BUTTON' && element.classList.contains('btn')) {
        alert('removido');
        app.innerHTML = newButton;
    }
});
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Ou seja, o evento de clique é para toda a div (inclusive qualquer elemento dentro dela), mas no callback eu verifico se o elemento clicado é o botão. Para saber melhor como funciona o event delegation, leia aqui.

Note também que nem precisa de insertAdjacentHTML, pois antes você seta o innerHTML para a string vazia, e isso faz com que todo o conteúdo da div seja apagado (insertAdjacentHTML faz mais sentido se você quisesse manter os elementos da div e quisesse inserir o novo na posição específica, mas como a div estará vazia, não faz diferença). Sendo assim, é mais fácil simplesmente substituir o innerHTML diretamente.


Alternativa

Uma alternativa é adicionar o listener no novo elemento. Em vez de criar o elemento como uma string, pode ser feito assim:

function removeBotaoCriaOutro() {
    const novo = document.createElement('button');
    novo.classList.add('btn');
    novo.textContent = 'Clique-me';
    // *** adicionar o evento no novo botão ***
    novo.addEventListener('click', removeBotaoCriaOutro);

    alert('removido');
    app.innerHTML = '';
    app.appendChild(novo); // como o div está vazio, pode adicionar assim
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Mas se quiser manter o novo botão como string, também pode ser:

function removeBotaoCriaOutro() {
    let novo = document.createElement('template');
    novo.innerHTML = '<button class="btn">Clique-me</button>';
    novo = novo.content.firstChild;
    novo.addEventListener('click', removeBotaoCriaOutro);

    alert('removido');
    app.innerHTML = '';
    app.appendChild(novo); // como o div está vazio, pode adicionar assim
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Ou ainda, colocar o evento onclick na própria string:

function removeBotaoCriaOutro() {
    alert('removido');
    app.innerHTML = '<button class="btn" onclick="removeBotaoCriaOutro()">Clique-me</button>';
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Mas me parece um trabalho desnecessário ter que adicionar o evento toda hora, pois na minha opinião, usar event delegation é uma solução bem mais simples para este caso, já que basta adicionar o evento uma vez na div e ela cuida de verificar se o elemento clicado é o botão que queremos. Desta forma, quaisquer elementos novos que forem adicionados já "ganham de graça" o event handler da div.

Mas claro que o que é "melhor" varia conforme o caso. Por exemplo, se a div tiver muitos elementos e você só quer o evento de clique em um deles, aí talvez valha a pena adicionar o evento somente no elemento específico, mas se tem vários elementos que podem ser removidos e adicionados dinamicamente e todos respondem ao mesmo evento, pode ser mais simples usar event delegation.


Eu só questiono a utilidade de remover um elemento para adicionar outro idêntico logo em seguida (se foi para fins de aprendizado, ainda vai...)

hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170