Outside click hide div

JavaScript hide element on click outside

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
          element.style.display = 'none';
          removeClickListener();
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener);
    }

    document.addEventListener('click', outsideClickListener);
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

Source: stackoverflow.com

Similar codes

3 votes326 views3 answers
How to ignore prettier
Html
0 vote327 views1 answer
Angular to html converter
Html
1 vote383 views1 answer
Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'
Html
9 votes346 views3 answers
Express return html file
Html
9 votes417 views6 answers
Table in bootstrap 4
Html
3 votes376 views3 answers
Ss
Html
0 vote352 views1 answer
Shopify custom html image tag src attribute
Html
-2 votes367 views2 answers
How to use input type file and show selected file on screen
Html
6 votes344 views2 answers
How to make links open in a new window
Html
32 votes325 views6 answers
Href html
Html