Fadeout Каждый div отдельно

Question

У меня есть div div с уникальными идентификаторами и тем же классом mbox. Эти divs содержат некоторую информацию. В нижней части каждого div у меня есть div с тем же классом для всех divs removeme.

Как это возможно, когда я нажимаю на div с классом removeme, чтобы погасить div с классом mbox? Но только mbox, а не другой рядом с ним

Мой 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> 

Проверьте мой демо: http://jsfiddle.net/fWtm6/9/

Answer 1

Вы можете использовать .parent(), чтобы получить родительский элемент (в данном случае вам нужно от 2 до получить родителя .mbox

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

http://jsfiddle.net/kkd3r/

EDIT: После второго взгляда на JQuery API .parents() не будет лучшей идеей, как она проходит через все родительские элементы, так что вы можете явно отфильтровать элементы по классу или идентификатору независимо от того, насколько далеко она вверх по дереву

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

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

Answer 2

Попробуйте это, надеюсь, это будет ответить на ваш вопрос ..

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

Answer 3

Замените эту строку

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

с этим

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