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?

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?

• javascript

Share Follow asked Aug 22, 2019 at 18:31 fightstarr20fightstarr20 12.7k4545 gold badges171171 silver badges301301 bronze badges 5

• On a different note: you realise you're only adding a click handler to the first button, right? If you want all of them, you need querySelectorAll(...).forEach(...) – Mike 'Pomax' Kamermans Commented Aug 22, 2019 at 18:33
• 1 Did you read the specification? – Justin Lessard Commented Aug 22, 2019 at 18:33
• 2 closest returns an ancestor. Your .myButton elements have no ancestor matching .extra. – Paul Commented Aug 22, 2019 at 18:33
• 3 closest isn't a jquery only method: developer.mozilla/en-US/docs/Web/API/Element/closest – MaartenDev Commented Aug 22, 2019 at 18:35
• 1 OP never talked about jQuery. javascript !== jQuery – Justin Lessard Commented Aug 22, 2019 at 18:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A bination 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/en-US/docs/Web/API/Element/closest https://developer.mozilla/en-US/docs/Web/API/Document/querySelector

.closest traverses up the dom and does not look at sibling or child elements. In the answer by @MaartenDev he is using .closest to step up one level and target the buttons parent div. He then chains queryselector to step back down into the children and select using the .extra class. Another solution would be to use .nextElementSibling so you do not have to step up and back down. This would only work if your html elements were direct siblings and the item you were trying to target followed the element you were calling nextElementSibling on.

Here is an example of this.

document.querySelectorAll('.myButton').forEach(function(button){
  button.addEventListener('click',myFunction);
})
function myFunction() {
  
  event.preventDefault();
  
  var closest = this.nextElementSibling;
  
  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>