html - how to get parent span value using javascript?

Question

Below is the html that i have, When i click on any sub category like (Hott in Stock,Costumes,Shoes) I need to get "What's New" value from below element

<a href="/whats-new.html"><span class="has-submenu">What's New</span></a>


<li class="new_nav_item1">
   <a href="/whats-new.html"><span class="has-submenu">What's New</span></a> // need data from this element
   <div class="submenu-wrapper">
      <div class="sub-box-wrap">
         <ul class="submenu">
            <li class="col1">
               <h3><a href="/whats-new.html">What's New</a></h3>
               <ul>
                  <li><a href="/whats-new.html?p_=1&amp;c_=3-8&amp;i_=our_favs&amp;s_=http://www.devjavascipt.com/clothing.html">Clothing</a></li>
                  <li><a href="/whats-new.html?p_=1&amp;c_=20-8&amp;i_=our_favs&amp;s_=http://www.devjavascipt.com/shoes.html">Shoes</a></li>
                  <li><a href="/whats-new.html?p_=1&amp;c_=35-8&amp;i_=our_favs&amp;s_=http://www.devjavascipt.com/accessories.html">Accessories</a></li>
                  <li><a href="/whats-new.html?p_=1&amp;c_=39-8&amp;i_=our_favs&amp;s_=http://www.devjavascipt.com/makeup.html">Beauty</a></li>
               </ul>
            </li>
            <li class="col2">
               <h3><a style="text-decoration: none !important;">Our Faves</a></h3>
               <ul>
                  <!--li><a href="/devjavascipt-best-sellers/trendy-womens-clothing.html" style="color: #ff9cb9;">Front Row</a></li-->
                  <li><a href="/hott-in-stock">Hott in Stock</a></li>
                  <li><a style="color: #3399cc;" href="/devjavascipt-best-sellers/pre-orderz.html">Pre-Order</a></li>
                  <!--li><a href="/vintage-clothing-accessories.html">Vintage</a></li-->
                  <li><a href="/devjavascipt-best-sellers/trendy-womens-clothing">Now Trending</a></li>
                  <li><a href="/festival-shop">Festival</a></li>
                  <li><a href="/lookz/halloween-1.html">Costumes</a></li>
               </ul>
            </li>
            </li>
            </li>
         </ul>
      </div>
   </div>
</li>

I have tried a code in console

var x, i;
  x = document.querySelectorAll("#nav-box .submenu-wrapper ul li a");
  for (i = 0; i < x.length; i++) {
    x[i].onclick = function() {
        alert(this.textContent);
alert(this.parentElement.parentElement.parentElement.firstElementChild.textContent);
console.log(this.parent("span.has-submenu").textContent);
    }
  }

But its not working prrperly & shows null. Any thoughts on this ?

question from:https://stackoverflow.com/questions/65950457/how-to-get-parent-span-value-using-javascript

Answer 1

Waitting for answers