0

If we have a code like

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="highest_level_parent">
    <div class="inner">
        <a href="#!">Some link</a>
    </div>
</div>

<script>
document.getElementsByTagName('a')[0].addEventListener('click', function(){
    alert(this.highestLevelParent.className); // it's an example, of course there is no the highestLevelParent property in JS
});
</script>

</body>
</html>

and click the link, how can we get in pure JS the highest level parent of the clicked link i.e. <div class="highest_level_parent"> ?

I mean if we don't know how many levels of nesting are and don't know the class of the highest level parent. And it must work in IE11.

ps. The highest level parent with regard to the <body>

stckvrw
  • 1,689
  • 18
  • 42
  • I know Jquery's closest doesn't need a classname. – chevybow Jul 25 '18 at 19:27
  • Use the code in the duplicate question. The first element after `body` in the result is the element you want. – Barmar Jul 25 '18 at 19:27
  • @chevybow It needs something that distinguishes the element you're looking for. He just wants the highest element in the DOM hierarchy, there's no specific selector for it. – Barmar Jul 25 '18 at 19:28
  • 1
    Use [contains](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains) like this http://jsfiddle.net/nym38hr4/3/ – Get Off My Lawn Jul 25 '18 at 19:31

0 Answers0