Hide a div on clicking outside it with JavaScript/jQuery

This post will discuss how to hide a div container if a user clicks anywhere on the page outside it in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can bind to the document’s click event and hides the div container when the clicked element isn’t the container itself or a descendant of the div element. This can be implemented as following with jQuery:

jQuery

$(document).click(function() {

var container = $("#container");

if (!container.is(event.target) && !container.has(event.target).length) {

container.hide();

}

});

HTML

<label>Enter your name:</label>

<button id="submit">Submit</button>

</div>

Edit in JSFiddle

Another plausible way is to use the .closest() method:

jQuery

$(document).on('click', function(e) {

var container = $("#container");

if (!$(e.target).closest(container).length) {

container.hide();

}

});

HTML

<label>Enter your name:</label>

<button id="submit">Submit</button>

</div>

Edit in JSFiddle

2. Using JavaScript

Here, the idea is to detect click events on the page and set the container’s display to none only when the target of the click isn’t one of the div descendants.

JS

document.addEventListener('mouseup', function(e) {

var container = document.getElementById('container');

if (!container.contains(e.target)) {

container.style.display = 'none';

}

});

HTML

<label>Enter your name:</label>

<button id="submit">Submit</button>

</div>

Edit in JSFiddle

That’s all about hiding a div on clicking outside it in JavaScript and jQuery.

Hide a div on clicking outside it with JavaScript/jQuery

1. Using jQuery

jQuery

HTML

jQuery

HTML

2. Using JavaScript

JS

HTML

Share this: