Return the closest element matching a selector up the DOM tree
npm install element-closest[closest] is a polyfill for [#Element.closest].
``bash`
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.
`js`
element.closest(selectorString) //=> Element or null
This is especially useful for delegating events.
`js
document.addEventListener('click', function (event) {
// find nearest element up the tree that is an
var link = event.target.closest('a');
if (link) {
// do something with the
event.preventDefault();
}
});
`
The script is approximately 428 bytes, or 257 bytes when gzipped.
For immediate usage, add this script to your document:
`html`
For usage in Node, including Browserify and Webpack, run [closest] with your window object:
`js
const elementClosest = require('element-closest');
elementClosest(window); // this is used to reference window.Element
`
| 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 |
closest is especially useful for delegating events, but remember that Internet Explorer 8 does not support [#Element.addEventListener].
This library also polyfills [#Element.matches], which is widely supported but often vendor-prefixed.
`js`
element.matches(selectorString) //=> boolean
matches is especially useful for short-handing hasAttribute or classList.contains with selectors.
`js
const widget = document.querySelector('.custom-widget');
if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
// do something with the active widget
}
`
[#Element.closest]: https://dom.spec.whatwg.org/#dom-element-closest#Element.matches
[]: https://dom.spec.whatwg.org/#dom-element-matches#Element.addEventListener`]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Browser_compatibility
[
[closest]: https://github.com/jonathantneal/closest