pure JS - get parent DIV ID dynamically through the onlick event

Question

How can I get the ID of each main DIV through the onclick event?

I need the element to be found without using static names in the onclick events like the example document.getElementById('fruits'); .
I wish there was a way to get to the ID of each top parent DIV fruits and animals in a more dynamic way without using IDs on the sub-DIVs.

<div id="fruits">

  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="document.getElementById('fruits');">SELECT ALL</button>
    </div>

    <ul>
      <li><input type="checkbox" class="class-check" value="BANANA" onclick="document.getElementById('fruits');" />BANANA</li>
    </ul>
  </div>
  
</div>

<div id="animals">

  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="document.getElementById('animals');">SELECT AL</button>
    </div>

    <ul>
      <li><input type="checkbox"class="class-check" value="DOG" onclick="document.getElementById('animals');" />DOG</li>
    </ul>
  </div>
  
</div>

How about using the HTML DOM parentElement property? You can do that recursively filtering by tag name until you get to the body element. — hector-j-rivas, Jul 28 '22 at 14:11
If you use `.addEventListener()` with a proper function instead of putting your javascript into the HTML tags, you get easy access to th click event object. `event.target` will then refer to the button that was clicked. Once you have access to the button that was clicked, you just follow its parentNodes up the tree until you find a div with an id. — Shilly, Jul 28 '22 at 14:25

Sead · Accepted Answer · 2022-08-02T07:15:08.390

1

I would use el.closest, with el being the item you clicked. You can add class to the parent element something like class="category" and then el.closest('.category').id.

You can check more at https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

<div class="class-category" id="fruits">
  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="this.closest('.class-category').id">SELECT ALL</button>
    </div>
    <ul>
      <li><input type="checkbox" class="class-check" value="BANANA" onclick="this.closest('.class-category').id" />BANANA</li>
    </ul>
  </div>
</div>
<div class="class-category" id="animals">
  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="this.closest('.class-category').id">SELECT ALL</button>
    </div>
    <ul>
      <li><input type="checkbox" class="class-check" value="DOG" onclick="this.closest('.class-category').id" />DOG</li>
    </ul>
  </div>
</div>

edited Aug 02 '22 at 07:15

answered Jul 28 '22 at 14:02

Sead

190
11

I hope to found something like this `onclick="this.closest(this.className).id"`. I need to avoid any static instruction to reach the parent ID . Is it possible? With `el` i will need to specify the parent DIV ID somewhere and somehow. – Edgaras Jul 28 '22 at 14:11
You will need to specify something so you can find the parent. `this.className` is referencing the clicked element, if the element and its parent share a class that would be possible, but I would rather use distinct classNames for the parent. I'll expand my answer with full code, in just a sec. – Sead Aug 02 '22 at 07:06
1

@Jaakko I've added the example, the `onclick` will return you the id of the parent category (fruits or animals) and you can do whatever you want with the id after. Additionally, I would use a function instead of the same code on every `onclick` – Sead Aug 02 '22 at 07:17

pure JS - get parent DIV ID dynamically through the onlick event

1 Answers1