Parent Element Lab

Walk one level up with parentElement.

Nested court box

Outer box (#outer-box)

Inner box (#inner-box)

#12 badge
Click the button or the badge.

Ready.

Important HTML

The badge sits inside the inner box; the inner box sits inside the outer box.

<div id="outer-box">
  <div id="inner-box">
    <span id="jersey-badge">#12 badge</span>
  </div>
</div>

Important JavaScript

parentElement is one step up the tree.

const badge = document.getElementById("jersey-badge");
const card = badge.parentElement;
console.log(card.id);
card.classList.add("is-selected");