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

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:

  1. A mouseup event is to first checked upon the document
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $(document).mouseup(function (e) {
        // rest code here
    }

    chevron_right

    
    

  2. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    if ($(e.target).closest(".container").length === 0) {
        // rest code here
    }

    chevron_right

    
    

  3. The element is hidden using the hide() method.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $(".container").hide();

    chevron_right

    
    

  4. Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        </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>                    

    chevron_right

    
    

    Output:

    • Clicking inside the div:
      clicking-inside
    • Clicking outside the div:
      clicking-outside

    Method 2: Checking the element if it contains the click target:

    1. A mouseup event is to first checked upon the document
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      $(document).mouseup(function (e) {
          // rest code here
      }

      chevron_right

      
      

    2. 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.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      if(!container.is(e.target) && container.has(e.target).length === 0) {
          // rest code here
      }

      chevron_right

      
      

    3. The element is hidden using the hide() method.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      $(".container").hide();

      chevron_right

      
      

    4. Example:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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=
          </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>

      chevron_right

      
      

      Output:

      • Clicking inside the div:
        clicking-inside
      • Clicking outside the div:
        clicking-outside


      My Personal Notes arrow_drop_up

      Technical Writer Lets have an update

      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.