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

0 vote213 views1 answer
Removing leading whitespace from indented HTML source in pre/code tags
Html
2 votes249 views1 answer
Name attribute in html
Html
35 votes249 views6 answers
InnerHTML
Html
0 vote231 views1 answer
Change the height of select option
Html
0 vote214 views2 answers
Drupal 8 HTML in type link
Html
9 votes226 views2 answers
How to send html file with express
Html
1 vote227 views2 answers
Html if no image then text
Html
12 votes240 views2 answers
How to center a div on teh screen
Html
0 vote227 views1 answer
Mote
Html
4 votes199 views10 answers
1+1
Html