Is there a way to return the top or second parent element of a specified element using JavaScript?

Question

I would like to get the top parent element (section) of a myLI id.

My HTML code is:

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

My code is:

var x = document.getElementById("myLI").parentElement.nodeName;

My code returns UL but I would like for it to return section.

Answer 1

If you want to target the parent by tagName you could use .closest(selector); like :

var x = document.getElementById("myLI").closest('section');

NOTE : Take a look to the Browser compatibility section.

Hope this helps.

var x = document.getElementById("myLI").closest('section');

console.log(x.tagName);

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

Answer 2

var topParent = document.getElementById("myLI");
while( topParent.parentElement.nodeName != 'BODY' ){ 
  topParent = topParent.parentElement;
  }
  console.log( topParent.nodeName );

<section>
    <div>
        <ul>
          <li id="myLI">Coffee</li>
          <li>Tea</li>
        </ul>

    </div>
</section>

So I'm assuming you want the element right before the 'BODY' element?