Closest Lab

Walk up to the nearest matching ancestor with closest().

Player cards

Ava

Guard · #7

Jordan

Forward · #12

Mia

Guard · #3

Click Select card on any player.

Ready.

Important HTML

The button is nested inside actions inside the card. closest finds the card.

<article class="player-card" data-name="Ava">
  <h3>Ava</h3>
  <div class="card-actions">
    <button class="select-player" type="button">Select card</button>
  </div>
</article>

Important JavaScript

closest checks the element itself, then parents, for a CSS selector match.

const card = button.closest(".player-card");

if (card !== null) {
  card.classList.add("is-selected");
}