JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div>
  <h1>Steps to reproduce</h1>
  <ol>
    <li>Click on any of links below. You should get an alert message</li>
    <li>Click on the button `Add New Item (using innerHTML)`</li>
    <li>Try clicking on any of the links again. You shouldn't see any alert message as we used `innerHTML` to add addition list item to the list. Thus all the event listener that have been set preivously will be removed.</li>
  </ol>
</div>

<div>
  <button id="btn">Add New Item (using innerHTML)</button>
</div>

<ul id="list">
  <li><a href="#">Click on me 1</a></li>
  <li><a href="#">Click on me 2</a></li>
  <li><a href="#">Click on me 3</a></li>
</ul>

JavaScript

const list = document.getElementById("list");

Array.from(list.children).forEach((listItem) => {
   listItem.addEventListener("click", onListItemClick);
});

function onListItemClick (e) {
  const listItem = e.currentTarget;
  
  alert(`you clicked on ${listItem.textContent}`);
};


/*---------------------------------*/
const btn = document.getElementById("btn");


btn.addEventListener("click", onBtnClick);

function onBtnClick (e) {
   list.innerHTML += `<li><a href="#">Click on me ${list.children.length + 1}</a></li>`;
}