How to get parent element of a deep child?

Question

I have an HTML like -

<main>
<section>
  <div class="parent">
    <div class='level_1'>
      <div class='level_2'>
        <div class='level_3'>
          <span class='click_here'></span>
        </div><!--level 3-->
      </div><!--level 2-->
    </div> <!--level 1-->
  </div> <!--parent-->
<section>

<section>
  <!-- same as given above -->
<section>
<main>

See there is a span element of class click_here. So If user clicks to this span element I want to grab its grand parent element with having class parent by Javascript.
I know the basic solution like accessing e.parentElement.parentElement.parentElement.parentElement but this is not good because the clicked item might be in more deep level than given in example.
Is their any other solution by using Javascript ?

[closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) — vsync, May 22 '20 at 12:55

lusc · Answer 1 · 2020-05-22T13:16:03.573

2

You could do e.target.closest('.parent') which lets you select the closest parent with whatever selector you're looking for.

edited May 22 '20 at 13:16

answered May 22 '20 at 12:55

lusc

1,206
1
10
19

score 2 · Answer 2 · answered May 22 '20 at 13:03

You can use mouseEvent.target.closest('.parent'); to fetch the closest .parent element of the clicked element and this will work for any arbitrary nesting level. Example:

let span = document.querySelector('span');

span.addEventListener('click', function(e) {
 console.log(e.target.closest('.parent'));
});

span {
 display: block;
 width: 100px;
 height: 100px;
 background: tomato;
}

<main>
<section>
  <div class="parent">
    <div class='level_1'>
      <div class='level_2'>
        <div class='level_3'>
          <span class='click_here'></span>
        </div><!--level 3-->
      </div><!--level 2-->
    </div> <!--level 1-->
  </div> <!--parent-->
<section>

<section>
  <!-- same as given above -->
<section>
<main>

How to get parent element of a deep child?

2 Answers2