JavaScript closest

By  on  

When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element's parent based on selector?

To look up the element tree and find a parent by selector, you can use HTMLElement's closest method:

// Our sample element is an "a" tag that matches ul > li > a
const link = document.querySelector('li a');
const list = a.closest('ul');

closest looks up the ancestor chain to find a matching parent element -- the opposite of traditional CSS selectors. You can provide closest a simple or complex selector to look upward for!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!