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

1 vote171 views1 answer
Icon inside input
Html
1 vote184 views1 answer
Copy html code from website
Html
0 vote189 views1 answer
Count up timer in javascript
Html
0 vote194 views1 answer
Html paragraph with spaces
Html
1 vote199 views1 answer
Fa-fa-home
Html
1 vote192 views1 answer
Html entity at sign
Html
0 vote199 views1 answer
Format html in notepad++
Html
0 vote209 views1 answer
Hugo theme from html to md file
Html
38 votes182 views5 answers
Border bottom class in bootstrap 4
Html
0 vote165 views2 answers
Space between 2 h tags without break
Html