Search by Queries/Bugs/Errors

Hide div on click outside of element in javascript/jQuery

Sometimes we need to hide the div on click outside of element in javascript/jquery. In jQuery or javascript, you can bind a click event on the document and hide that specific div on the click outside of it.

Answers 2

On click outside of element hide element using mouseup() method

<div id="targetElement">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).mouseup(function(e) 
    {
        var container = $("#targetElement");
        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) 
        {
            container.hide();
        }
    });
</script>

This code snippet will help you to hide the target element on click outside of the element. You can change the target element as per your requirement and can use it in your project.

On click outside of element hide element using click method on document

<div id="targetElement">
    <a class="agree" href="javascript:void(0);">I Agree</a>
    <a class="disagree" href="javascript:void(0);">Disagree</a>
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).click(function() {
 	$("#targetElement").empty().hide();
});
</script>

This method will hide the target element on click outside of element and on click of the inner element itself.

Back to code snippet queries related javascript

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress

Hide div on click outside of element in javascript/jQuery

On click outside of element hide element using mouseup() method

On click outside of element hide element using click method on document

Give answer to above query by entering the title (optional) and body

Random Code Snippet Queries: Javascript

Hide div on click outside of element in javascript/jQuery

On click outside of element hide element using mouseup() method

On click outside of element hide element using click method on document

Give answer to above query by entering the title (optional) and body

Random Code Snippet Queries: Javascript

Insert Link

Insert Image URL