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 vote168 views2 answers
Import api vue and html
Html
0 vote176 views1 answer
Only one of my checkboxes will check if i click on its label
Html
0 vote173 views1 answer
Asciidoc anchor
Html
0 vote132 views1 answer
Python print html as a string
Html
0 vote179 views2 answers
Vertical line navigation bar
Html
0 vote163 views1 answer
Remove blank rows in html vs code
Html
6 votes173 views2 answers
Link open new tab
Html
21 votes190 views1 answer
Media screen meta tag
Html
0 vote180 views1 answer
Meta tag for social media
Html
0 vote165 views2 answers
Button inside textarea
Html