JavaScript closest
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!
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Send Email Notifications for Broken Images Using jQuery AJAX]()
It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...
![Highlighter: A MooTools Search & Highlight Plugin]()
Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution.
The MooTools JavaScript Class
The...
