how to hide parent when click anywhere outside the child element

Question

I have this code

<style>

.Parent {width:500px;height:500px;background:#000}
.Parent .Child {width:250px;height:250px;background:#F00}

</style>

<div class="Parent">

   <div class="child"></div>

</div>

<script>

$(document).ready(function() {

     $('.Parent').click(function () {

           $(this).hide()

     });

     /* 
     But if i click on <div class="Child"></div> , 
     <div class="Parent"></div> won't get hidden .
     */ 

});

</script>

I want my code to hide'.parent', When I click on areas in .Parent witch doesn't include .Child element and if the areas I click was included in '.child' area , it don't do anything .

so what would u guys suggest ?

Answer 1

just do this:

$('.Parent, .child').click(function(e) {
  if ($(this).hasClass('child')) {
    return false;
  }
  $(this).hide();
});

 $('.Parent, .child').click(function(e) { if ($(this).hasClass('child')) { return false; } $(this).hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='Parent' style='width:auto; padding:50px; border:red solid 1px;'> <div class='child' style='width:200px; height:200px;border:green solid 1px;'> child </div> </div> 

Answer 2

Simply make of event.stopPropagation(); to stop event of child from propagating to parent.

So script becomes:

$('.Parent').click(function () {
        $(this).hide();
});
$('.child').click(function (e) {
        e.stopPropagation();
});

See the fiddle: " http://jsfiddle.net/sftknxeo/1/ "

Answer 3

You can use the event's target to determine what you have clicked on. This way you can also assign an event to happen if you have clicked on the child. (If need be.)

    $('.Parent').click(function(e){
        if(e.target == this){
            $(this).hide()
        }
    });

DEMO

Answer 4

Quick and dirty version would be simply to add another event handler. Add a click handler to child that hides parent. Then if you click on parent, it hides itself, and if you click on child, it hides parent.

$('.child').click(function (e) {
  $('.parent').hide();        
});

Not the most elegant solution, sure, but it's quick and easy and should get the job done.

Answer 5

$('.Parent').click(function () {

     $(this).css("visibility", "hidden");
     $(".Parent" ).children().css("visibility", "visible");


 });

If you just want to hide parent then it will do the needful.

Answer 6

Check for the clicked element by looking at the target property of the event object. Here is something you might want to do:

$(function () {
    $('.Parent').click(function (e) {
        if ($(e.target).hasClass("child")) {
            return false;
        }
        $(this).hide();
    });
});

Answer 7

$('.parent').click(function(e) {
  if ($(this).hasClass('child')) {
    return false;
  }
  $(this).hide();
});