
Hide div on click outside of element in javascript/jQuery
Hide div on click outside of element in javascript/jQuery
In this article, we will see how to solve "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.-
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) && 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.
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Javascript
- Json stringify
- How to use JavaScript to search for items in a list
- How to get the length of a number in JavaScript
- Get hostname from URL in javascript
- How to push string in an array in Javascript
- Remove hostname from URL in javascript
- Short-circuits conditionals
- How to echo array in Javascript
- Javascript to print Fibonacci series upto 15 Observations
- On click enter redirect to another URL with parameters in javascript
- Multidimensional array example javascript
- How to make entire Div clickable in javascript
- How to set href value of anchor tag in javascript
- How to validate input type file size in javascript
- Trim the leading and trailing comma from string in Javascript
- Uncaught TypeError: $(...).summernote is not a function
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to preview a word document in HTML using javascript
- How to display for slash as a string in javascript HTML
- How to preview video before uploading in javascript
- How to get query string value in javascript
- How to open modal after redirect
- How to display an image in Javascript onclick
- How to Set data to localstorage in javascript
- Input type file styling