JarCastingclosest 
closest is a polyfill for #Element.closest.
npm install element-closest
The #Element.closest method returns the closest element that matches a selector. It returns the element itself, one of its ancestor, or null if there isn't any match.
element.closest(selectorString) //=> Element or null
This is especially useful for delegating events.
document.addEventListener('click', function (event) {
// find nearest element up the tree that is an <a>
var link = event.target.closest('a');
if (link) {
// do something with the <a>
event.preventDefault();
}
});
The script is approximately 428 bytes, or 257 bytes when gzipped.
Usage
For immediate usage, add this script to your document:
<script src="https://unpkg.com/element-closest"></script>
For usage in Node, including Browserify and Webpack, run closest with your window object:
const elementClosest = require('element-closest');
elementClosest(window); // this is used to reference window.Element
Browser compatibility
| Browser | Native Support | Polyfill Support |
|---|---|---|
| Android | 53 | 2.2+ |
| Blackberry | ✘ | 7+ |
| Chrome | 41+ | 4 - 40 |
| Edge | 15 | 12 - 14 |
| Firefox | 35+ | 3.5 - 34 |
| Internet Explorer | ✘ | 8+ |
| Opera | 28+ | 10 - 27 |
| Opera Mobile | 37+ | 12+ |
| Safari (iOS) | 9.2+ | 3.2 - 8.4 |
| Safari (MacOS) | 9.1+ | 3.1 - 8 |
Internet Explorer 8
closest is especially useful for delegating events, but remember that Internet Explorer 8 does not support #Element.addEventListener.
matches
This library also polyfills #Element.matches, which is widely supported but often vendor-prefixed.
element.matches(selectorString) //=> boolean
matches is especially useful for short-handing hasAttribute or classList.contains with selectors.
const widget = document.querySelector('.custom-widget');
if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
// do something with the active widget
}