JavaScript .closest returning null

Question

I have the following simple layout which I am unable to change. I am trying to use JavaScript to get the extra element which is closest to the button that was pressed

With help from another question I was able to get the preventDefault part working but now I am struggling with closest

<div class="buttons">
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">64736</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">5446</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">78667</div>
    </div>
</div>

document.querySelector('.myButton').addEventListener('click', myFunction);

function myFunction() {

    event.preventDefault();

    close = this.closest(".extra"); 

    console.log(close)

}

But this is giving me null when I press the button, where am I going wrong?

Answer 1

A combination of closest and querySelector can be used:

document.querySelectorAll('.myButton').forEach(function(button) {
  button.addEventListener('click', myFunction);
});

function myFunction(evt) {
  evt.preventDefault();

  var closest = evt.currentTarget.closest(".button").querySelector('.extra');

  console.log(closest)

}

<div class="buttons">
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">64736</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">5446</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">78667</div>
  </div>
</div>

More info:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/closest https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector