Noodles, Poodles and More!
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    element-closestpublic

    closest

    Return the closest element matching a selector up the DOM tree

    NPM Version Build Status Licensing Changelog Gitter Chat

    closest is a polyfill for #Element.closest.

    The #Element.closest method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.

    element.closest(selectorString) //=> element

    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();
        }
    });

    matches

    The 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.

    var widget = document.querySelector('.custom-widget');
     
    if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
        // do something with the active widget
    }

    Browser compatibility

    Browser Native Support Polyfill Support
    Android 53 2.2+
    Blackberry 7+
    Chrome 41+ 4 - 40
    Edge 12+
    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.

    install

    npm i element-closest

    Downloadsweekly downloads

    16,690

    version

    2.0.2

    license

    CC0-1.0

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar