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 votes136 views1 answer
Calendar input
Html
9 votes157 views6 answers
Change html using jquery
Html
1 vote136 views3 answers
Haml to html
Html
3 votes145 views3 answers
Ion button outline
Html
2 votes125 views3 answers
Navigation bar on more than one page
Html
5 votes161 views2 answers
Html table colspan and rowspan
Html
0 vote141 views1 answer
How to make a clear button in javascript
Html
2 votes150 views1 answer
Ion icon size small
Html
0 vote156 views2 answers
Twitter card tags
Html
1 vote140 views1 answer
Description list html
Html