CODEWITHSUNDEEP
javascriptjqueryfade
Irene T.
Irene T.

Reputation: 1393

Fadeout Each div separately

I have some divs with unique ids and same class mbox. These divs holds some info. At the bottom of each div I have a div with same class to all divs removeme.

How is it possible when I am clicking the div with class removeme to fade out the div with class mbox? But only mbox and not the other next to it

My Html:

<style>

.mbox{
width:300px; 
height:280px; 
float:left; 
margin-left:5px; 
margin-right:10px; 
margin-bottom:10px; 
background-color: #E0E0E0; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border:1px solid #CACACA; 
 }

.removeme{
width:200px; height:45px; float:left; background-color: #F00;    
}

.title{
width:290px; 
float:left; 
margin-left:5px; 
margin-top:5px; 
text-align:center; 
color:#333; 
font-family:Verdana, Geneva, sans-serif; 
font-size:24px; 
font-weight:bold;
}

.photoholder{
width:200px; 
height:150px; 
float:left; 
margin-left:50px; 
margin-top:8px; 
background-color:#FFF;    
}

.imgclass{
float:left; 
margin-left:10px; 
margin-top:5px;    
}
</style>


<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>    
</div>

<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>    
</div>

<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>

Check my demo: http://jsfiddle.net/fWtm6/9/

Upvotes: 0

Views: 93

Answers (3)

candeias
candeias

Reputation: 131

Replace this line

$(this).fadeOut("fast");

with this

$(this).closest('.mbox').fadeOut("fast");

Upvotes: 0

Rumman Ahmed
Rumman Ahmed

Reputation: 189

Try this, Hope it will answer your question..

$('.removeme').click(function () {
     var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});

Upvotes: 0

Kevin Pei
Kevin Pei

Reputation: 5872

You can use .parent() to get the parent element (in this case you need 2 to get the parent .mbox 

$('.removeme').click(function () {
    $(this).parent().parent().fadeOut();
});

http://jsfiddle.net/kkd3r/

EDIT: After a second look at the jQuery API .parents() would be a better idea as it traverses all the parent elements so you can explicitly filter out elements by class or id no matter how far it is up the tree

$('.removeme').click(function () {
    $(this).parents('.mbox').fadeOut();
});

http://jsfiddle.net/kkd3r/1/

Upvotes: 2

Related Questions