How to get the desired parent tag tag?

Question

JavaScript

Hi, I'm having a problem getting the value of a specific tag.

I have the following cart structure

<div id="products" class="row product__list">
            <!-- Start Single Product -->
            <div class="col-md-3 single__pro col-lg-3 col-md-4 cat--1 col-sm-12">
                <div class="product foo">
                    <div class="product__inner">
                        <div class="pro__thumb">
                            <a href="#">
                                <img src="images/product/1.png" alt="product images">
                            </a>
                        </div>
                        <div class="product__hover__info">
                            <ul class="product__action">
                                <li><a data-toggle="modal" data-target="#productModal" title="Quick View" class="quick-view modal-view detail-link" href="#"><span class="ti-plus"></span></a></li>
                                <li><a title="Add TO Cart"><span class="ti-shopping-cart" data-action="addToCart"></span></a></li>
                            </ul>
                        </div>
                        <div class="add__to__wishlist">
                            <a data-toggle="tooltip" title="Add To Wishlist" class="add-to-cart" href="wishlist.html"><span class="ti-heart"></span></a>
                        </div>
                    </div>
                    <div class="product__details">
                        <h2><a href="product-details.html">Simple Black Clock</a></h2>
                        <ul class="product__price">
                            <li class="old__price">$16.00</li>
                            <li class="new__price">$10.00</li>
                        </ul>
                    </div>
                </div>
            </div>

On clicking on a certain span, I need to get the data of some tags in order to add them to an array.
I have the following event handler

class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    addToCart() {
       alert("target = " + event.target.tagName);
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

  new Menu(products);

Here I get only the element that was clicked. But how, for example, to get the value that is in the block of the same product in the .product__details>h2>a(Simple Black Clock) class?

Answer 1

Iterate over the parent step up and compare against the given conditions.