How to hide a div when the user clicks outside of it using jQuery? - GeeksforGeeks

03 Aug, 2021
An element can be hidden or shown based on if the mouse is clicked outside the element using two methods.
Method 1: Using the closest method:
A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}The closest() method is called on the target click. This method returns the first ancestor of the selected element in the DOM tree. The length property is then used on the result to find out the number of ancestors. If there are no ancestors, it means that the click was outside the element.if ($(e.target).closest(".container").length === 0) {    // rest code here}The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>  <head>    <title>        How to hide a div when the user         clicks outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            if ($(e.target).closest(".container").length                        === 0) {                $(".container").hide();            }        });    </script></body>  </html>                    Output:Clicking inside the div:Clicking outside the div:Method 2: Checking the element if it contains the click target:A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}The element is checked for 2 things, that the click does not land on the element by passing the is() method and the has() method with the click target.The is() method check the current element against the specified element. The click target is passed as a parameter and the whole result is negated to essentially check if the click was outside the element.The has() method is used to return all the elements which match at least one of the elements passed to this method. The length property is then used on the result to check if any elements are returned. If there are no elements returned, it means that the click was outside the element.if(!container.is(e.target) && container.has(e.target).length === 0) {    // rest code here}The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>      <head>    <title>        How to hide a div when the user clicks        outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            var container = $(".container");            if(!container.is(e.target) &&             container.has(e.target).length === 0) {                container.hide();            }        });    </script></body>  </html>Output:Clicking inside the div:Clicking outside the div:jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.My Personal Notes
arrow_drop_upSave
A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}
$(document).mouseup(function (e) {    // rest code here}
The closest() method is called on the target click. This method returns the first ancestor of the selected element in the DOM tree. The length property is then used on the result to find out the number of ancestors. If there are no ancestors, it means that the click was outside the element.if ($(e.target).closest(".container").length === 0) {    // rest code here}
if ($(e.target).closest(".container").length === 0) {    // rest code here}
The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>  <head>    <title>        How to hide a div when the user         clicks outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            if ($(e.target).closest(".container").length                        === 0) {                $(".container").hide();            }        });    </script></body>  </html>                    Output:Clicking inside the div:Clicking outside the div:Method 2: Checking the element if it contains the click target:A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}The element is checked for 2 things, that the click does not land on the element by passing the is() method and the has() method with the click target.The is() method check the current element against the specified element. The click target is passed as a parameter and the whole result is negated to essentially check if the click was outside the element.The has() method is used to return all the elements which match at least one of the elements passed to this method. The length property is then used on the result to check if any elements are returned. If there are no elements returned, it means that the click was outside the element.if(!container.is(e.target) && container.has(e.target).length === 0) {    // rest code here}The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>      <head>    <title>        How to hide a div when the user clicks        outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            var container = $(".container");            if(!container.is(e.target) &&             container.has(e.target).length === 0) {                container.hide();            }        });    </script></body>  </html>Output:Clicking inside the div:Clicking outside the div:jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.My Personal Notes
arrow_drop_upSave
$(".container").hide();
Example:
<!DOCTYPE html><html>  <head>    <title>        How to hide a div when the user         clicks outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            if ($(e.target).closest(".container").length                        === 0) {                $(".container").hide();            }        });    </script></body>  </html>                    
Output:
Clicking inside the div:
Clicking outside the div:
Method 2: Checking the element if it contains the click target:
A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}The element is checked for 2 things, that the click does not land on the element by passing the is() method and the has() method with the click target.The is() method check the current element against the specified element. The click target is passed as a parameter and the whole result is negated to essentially check if the click was outside the element.The has() method is used to return all the elements which match at least one of the elements passed to this method. The length property is then used on the result to check if any elements are returned. If there are no elements returned, it means that the click was outside the element.if(!container.is(e.target) && container.has(e.target).length === 0) {    // rest code here}The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>      <head>    <title>        How to hide a div when the user clicks        outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            var container = $(".container");            if(!container.is(e.target) &&             container.has(e.target).length === 0) {                container.hide();            }        });    </script></body>  </html>Output:Clicking inside the div:Clicking outside the div:jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.My Personal Notes
arrow_drop_upSave
A mouseup event is to first checked upon the document$(document).mouseup(function (e) {    // rest code here}
$(document).mouseup(function (e) {    // rest code here}
The element is checked for 2 things, that the click does not land on the element by passing the is() method and the has() method with the click target.The is() method check the current element against the specified element. The click target is passed as a parameter and the whole result is negated to essentially check if the click was outside the element.The has() method is used to return all the elements which match at least one of the elements passed to this method. The length property is then used on the result to check if any elements are returned. If there are no elements returned, it means that the click was outside the element.if(!container.is(e.target) && container.has(e.target).length === 0) {    // rest code here}
The is() method check the current element against the specified element. The click target is passed as a parameter and the whole result is negated to essentially check if the click was outside the element.
The has() method is used to return all the elements which match at least one of the elements passed to this method. The length property is then used on the result to check if any elements are returned. If there are no elements returned, it means that the click was outside the element.
if(!container.is(e.target) && container.has(e.target).length === 0) {    // rest code here}
The element is hidden using the hide() method.$(".container").hide();Example:<!DOCTYPE html><html>      <head>    <title>        How to hide a div when the user clicks        outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            var container = $(".container");            if(!container.is(e.target) &&             container.has(e.target).length === 0) {                container.hide();            }        });    </script></body>  </html>Output:Clicking inside the div:Clicking outside the div:jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.My Personal Notes
arrow_drop_upSave
$(".container").hide();
Example:
<!DOCTYPE html><html>      <head>    <title>        How to hide a div when the user clicks        outside of it using jQuery?    </title>          <style>        .container {            height: 200px;            width: 200px;            background-color: green;            border: 5px solid black;        }    </style>          <script src=        "https://code.jquery.com/jquery-3.4.0.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to hide a div when the user clicks        outside of it using jQuery?    </b>          <p>Click outside the green div to hide it</p>          <div class="container" style="color:green"></div>          <script type="text/javascript">        $(document).mouseup(function (e) {            var container = $(".container");            if(!container.is(e.target) &&             container.has(e.target).length === 0) {                container.hide();            }        });    </script></body>  </html>
Output:
Clicking inside the div:
Clicking outside the div:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?