HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest delegation</title>
  <style>
    li { padding: 0.5rem; border: 1px solid #ccc; margin: 0.25rem 0; cursor: pointer; }
    li.active { background: #dbeafe; }
  </style>
</head>
<body>
  <ul id="list">
    <li data-id="1"><span>One</span></li>
    <li data-id="2"><span>Two</span></li>
    <li data-id="3"><span>Three</span></li>
  </ul>
  <pre id="out">Click a list item (or its text)</pre>
  <script>
    var list = document.getElementById("list");
    list.addEventListener("click", function (e) {
      var item = e.target.closest("li");
      if (!item) return;
      list.querySelectorAll("li").forEach(function (li) {
        li.classList.remove("active");
      });
      item.classList.add("active");
      document.getElementById("out").textContent = "Picked id: " + item.dataset.id;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.closest — event delegation (Try It)