How to Hide Div when Click Outside of the Element using jQuery

Hide element on click outside, is a must-have functionality for the dropdown menu. Apart from that, it also used in some situations where you need to hide div when the user clicks outside of this element. You can easily hide div or element when click outside of it using jQuery.

In the example code snippet, we will show how to hide element on click outside using jQuery. The div will be hidden when the user clicks on outside of this element.

Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click event and hide div when clicking outside of the specific element.

<script>
$(document).mouseup(function(e){
    var container = $("#elementID");

    // If the target of the click isn't the container
    if(!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
    }
});
</script>