Kevin Powell - Community•12mo ago

Help with highlighting a singular list element on click.

Click target is highlighted, while other elements, if they were ones being highlighted beforehand, lose it. JS in this example is what I was suggested to do here some time ago: https://codepen.io/DovahTheKiin/pen/WNmQOqM Problem with this method is that if you click on any child element, it does not apply the class on the parent element. This link was suggested to me multiple times here as well, but it suffers from the same problem: https://gomakethings.com/listening-for-events-on-multiple-elements-using-javascript-event-delegation/

if (event.target.matches('.click-me')) {
        // Do something...
    }

if (event.target.matches('.click-me')) {
        // Do something...
    }

If you click on any child element of the "matches" element, event is not working.

DovahTheKiin

CodePen

WNmQOqM

...

Listening for events on multiple elements using JavaScript event de...

In JavaScript, event listeners have to be attached to individual elements. You can’t attach them to an array or node list of matching elements like you might in jQuery. Today, we’re going to look at a technique that you can use listen for the same even on multiple elements without having to attach to each element individually: event delegation. ...

3 Replies

clevermissfox•12mo ago

try event.target.closest(“.parent”)

MarkBoots•12mo ago

this should work for you

const randomDiv = document.querySelector(".random-div");
randomDiv.addEventListener("click", clickHandler);

function clickHandler(e){
  const clickDiv = e.target.closest(".click-div");
  const currentActive = e.currentTarget.querySelector(".active");
  if(currentActive) currentActive.classList.remove("active");
  clickDiv.classList.add("active");
}

const randomDiv = document.querySelector(".random-div");
randomDiv.addEventListener("click", clickHandler);

function clickHandler(e){
  const clickDiv = e.target.closest(".click-div");
  const currentActive = e.currentTarget.querySelector(".active");
  if(currentActive) currentActive.classList.remove("active");
  clickDiv.classList.add("active");
}

DovahOP•12mo ago

Works! Thanks!

Gaming

Programming

Help with highlighting a singular list element on click.