Implementing Event Delegation

// HTML Example:
// <ul id="myList">
//   <li data-item-id="1">Item One</li>
//   <li data-item-id="2">Item Two</li>
//   <li data-item-id="3">Item Three</li>
//   <li><button data-action="add">Add New Item</button></li>
// </ul>

document.addEventListener('DOMContentLoaded', () => {
  const myList = document.getElementById('myList');

  if (myList) {
    myList.addEventListener('click', (event) => {
      // Check if the clicked element is an <li> with a data-item-id
      if (event.target.tagName === 'LI' && event.target.dataset.itemId) {
        console.log(`Clicked on item with ID: ${event.target.dataset.itemId}`);
        event.target.style.backgroundColor = 'yellow';
      }
      // Check if the clicked element is a button with data-action="add"
      else if (event.target.tagName === 'BUTTON' && event.target.dataset.action === 'add') {
        const newItemCount = myList.children.length; // Approximate, assuming list items
        const newItem = document.createElement('li');
        newItem.textContent = `New Item ${newItemCount}`;
        newItem.dataset.itemId = newItemCount;
        myList.insertBefore(newItem, event.target.parentNode); // Insert before the button's parent (the li)
        console.log(`Added new item: New Item ${newItemCount}`);
      }
    });
  }
});