Hide Element when user click outside using JQuery

In this tutorial we will see how to Hide Element when user click outside using JQuery. target Event property and .hide() method is used for this.

Table of Contents

HTML Code

HTML Code is given below.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hide Element when user click outside using Jquery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="main">
</div>    
</body>
</html>

CSS Code

CSS Code is given below.


.main{
width: 400px;
height: 200px;
background:#22438C;
}

JQuery Code

JQuery Code is given below, In this code we have used .hide() method to hide the div element. But first it is checked that if the click is made outside element or not using target property.


<script>
$(document).mouseup(function(event) 
{
var div = $(".main");
if (!div.is(event.target) && div.has(event.target).length === 0) 
{
div.hide();
}
});
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Hide Element when user click outside using JQuery.