CODEWITHSUNDEEP
javascriptjquery
Danin Na
Danin Na

Reputation: 409

how to hide parent when click anywhere outside the child element

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 elementand if the areas I click was included in '.child' area , it don't do anything .

so what would u guys suggest ?

Upvotes: 1

Views: 1196

Answers (7)

Ditto P S
Ditto P S

Reputation: 157

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

Upvotes: 0

Ajmal Ismail
Ajmal Ismail

Reputation: 111

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();
    });
});

Upvotes: 0

PraveenKumar.erakkingal
PraveenKumar.erakkingal

Reputation: 119

$('.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.

Upvotes: 0

Jai
Jai

Reputation: 74738

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>

Upvotes: 2

wrxsti
wrxsti

Reputation: 3504

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

Upvotes: 1

Dave Thomas
Dave Thomas

Reputation: 425

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.

Upvotes: 0

Nikhil Batra
Nikhil Batra

Reputation: 3148

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/"

Upvotes: 2

Related Questions