How to easily get to the ancestor element that is placed 12 levels up from its descendent?

Question

<div class="furniture--4 border--round arrows_style owl-carousel owl-theme row mt--50 owl-loaded owl-drag">
  <div class="owl-stage-outer">
    <div class="owl-stage" style="transform: translate3d(-1392px, 0px, 0px); transition: all 0s ease 0s; width: 5568px;">
      <div class="owl-item cloned" style="width: 464px;">
        <div class="product product__style--3">
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="product__thumb">
              <a class="first__img" href="single-product.html"><img src="images/books/7.jpg" alt="product image"/></a>
              <div class="hot__box"><span class="hot-label">HOT</span></div>
            </div>
            <div class="product__content content--center">
              <h4><a href="single-product.html">Lando</a></h4>
              <ul class="prize d-flex">
                <li>$35.00</li>
                <li class="old_prize">$50.00</li>
              </ul>
              <div class="action">
                <div class="actions_inner">
                  <ul class="add_to_links">
                    <li>
                      <a class="cart" href="#">
                        <i class="bi bi-shopping-bag4"></i>
                      </a>
                    </li>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

In the above HTML document I've added a click event for each bi bi-shopping-bag4 class elements (at the bottom of the document with tag <i> ).

What I need is to move 12 levels up from this element with event.target. How can I do this easily, to save me having to write "parentElement" 12 times in a row?

Answer 1

All you have to do is find some level of uniqueness and target that.
The easiest way of doing this is with .closest(), which is supported in most browsers:

In your example, I assume in the above you're looking to target .furniture--4.
Here's a trimmed down example showing how that can be targeted:

document.getElementsByClassName('cart')[0].addEventListener('click', function() {
  const target = this.closest(".furniture--4");
  console.log(target.innerHTML);
});

<div class="furniture--4">
  <div>
    <div>
      <span class="cart">Click me</span>
    </div>
  </div>
</div>

Obviously, this will only work when the target element is the closest element with the relevant selector, but you can always target the element directly if need be as well.

Here this is shown with document.getElementsByClassName('furniture--4')[0]:

document.getElementsByClassName('cart')[0].addEventListener('click', function() {
  const target = document.getElementsByClassName('furniture--4')[0];
  console.log(target.innerHTML);
});

<div class="furniture--4">
  <div>
    <div>
      <span class="cart">Click me</span>
    </div>
  </div>
</div>

Answer 2

This can be achieved quite easily without jQuery.

Consider the code snippet below - the idea here is to traverse up the DOM (from the first element that matches the "starting selector") and at each step, check to see if that ancestor node matches the "ending selector". For more information on how this works, see the comments in the code snippet below:

/*
Utilitiy function to find ancestor node in DOM with class "ancestorClass"
from first node in DOM with class "startClass"
*/
function findMatchingAncestor(startClass, ancestorClass) {

  /*
  Query dom for node of with startClass. This would be "bi-shopping-bag4"
  in the case of your OP
  */
  let node = document.querySelector(`.${startClass}`);

  /*
  Start iteration to traverse up tree looking for matching ancestors
  */
  while (node) {
 
    /*
    If ancestor node's class list contains "ancestorClass", return this node.
    In the case of your OP, we're looking for the first ancestor with the 
    "owl-stage-outer" class
    */
    if (node.classList.contains(ancestorClass)) {
      return node;
    }

    /*
    If ancestor node didn't contain the "ancestorClass" in class list, 
    traverse up the next level of the DOM
    */
    node = node.parentElement;
  }
}

// Fetch the .bi-shopping-bag4
console.log(findMatchingAncestor('bi-shopping-bag4', 'owl-stage-outer'))

<div class="furniture--4 border--round arrows_style owl-carousel owl-theme row mt--50 owl-loaded owl-drag">


  <div class="owl-stage-outer">
    <div class="owl-stage" style="transform: translate3d(-1392px, 0px, 0px); transition: all 0s ease 0s; width: 5568px;">
      <div class="owl-item cloned" style="width: 464px;">
        <div class="product product__style--3">
          <div class="col-lg-3 col-md-4 col-sm-6 col-12">
            <div class="product__thumb">
              <a class="first__img" href="single-product.html"><img src="images/books/7.jpg" alt="product image"></a>
              <div class="hot__box">
                <span class="hot-label">HOT</span>
              </div>
            </div>
            <div class="product__content content--center">
              <h4><a href="single-product.html">Lando</a></h4>
              <ul class="prize d-flex">
                <li>$35.00</li>
                <li class="old_prize">$50.00</li>
              </ul>
              <div class="action">
                <div class="actions_inner">
                  <ul class="add_to_links">
                    <li>
                      <a class="cart" href="#">
                        <i class="bi bi-shopping-bag4"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>