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

2 votes205 views2 answers
No-gutter bootstrap 4
Html
4 votes233 views1 answer
Custom iframe
Html
0 vote245 views1 answer
View html file linux terminal
Html
0 vote182 views1 answer
Can i write php code in html file
Html
26 votes258 views2 answers
How to write image tag in markdown
Html
3 votes206 views1 answer
React passing all props to child
Html
63 votes189 views1 answer
Open link in new tab grepper
Html
1 vote197 views1 answer
Carousel bootstrap v3.3.6
Html
15 votes195 views2 answers
Html datetime format
Html
0 vote221 views1 answer
Save soup as html
Html