Does anyone know why this code is not working the way I want it to?

Question

I am creating a web app with node.js, express and pug templates and here I am trying to simulate a warning when the user tries to remove a review he has posted.

so, in the front end I have a button that the user clicks to remove his review

when the user clicks that button I run

index.js

import { showWarning } from './warning';

const removerStoreReviewBtn = document.querySelector('.side-nav__removeStoreReviewbtn');

if (removerStoreReviewBtn)
   removerStoreReviewBtn.addEventListener('click', e => {
      e.preventDefault();

      showWarning('Would you like to remove this review ?');
   });

warning.js

export const hideWarning = () => {
   const el = document.querySelector('.warning');
   const warningText = document.querySelector('.warning__text');
   if (el) el.parentElement.removeChild(el);
   if (warningText) warningText.parentElement.removeChild(warningText);
};

export const showWarning = (msg, time = 30) => {
   hideWarning();
   console.log(msg);
   const markUp = `
                        <div class="warning">
                            <div class="warning__text">${msg}</div>
                            <button class="warning--no">
                                <span>Cancelar</span>
                            </button>
                            <button class="warning--yes">
                                <span>Apagar</span>
                            </button>
                        </div>`;

   document.querySelector('.header').insertAdjacentHTML('afterend', markUp);
   window.setTimeout(hideWarning, time * 1000);
};

The showWarning function display everything the way I want in the front end

then back at the index.js file I have the following code

index.js

const warningBtnYes = document.querySelector('.warning--yes');
const warningBtnNo = document.querySelector('.warning--no');

if (warningBtnYes)
   warningBtnYes.addEventListener('click', e => {
      e.preventDefault();
      console.log('remove');
      //removerStoreReview(reviewId);
   });
if (warningBtnNo)
   warningBtnNo.addEventListener('click', e => {
      e.preventDefault();
      console.log('Do not remove');
   });

when I click any of these buttons nothing happens (I am expecting the console.logs) and I can't figure out why nothing happens, hopefully anyone can help me.

Thanks Mateus

Answer 1

When you use .parentElement.removeChild() you have turned off all event listeners for those button.

You have two options. You can preserve the event listeners by storing the return value from the .removeChild() call. In order to restore the event listeners you will need to reuse the stored (previously removed) node.

Alternatively, you'll need to re-add your event listeners after inserting the new HTML.

Helpful docs