Jquery скрыть ближайший («DIV») не работает

Question

У меня есть FileUpload как этот

<div class="wrapper" style="margin-top:20px;"> 
    <input class="fileUpload" type="file" /> 
    <br /> 
    <div class="image-holder"></div> 
    <div> 
     <input style="display:none" class="cancella_immagine" type="button" value="cancella"> 
    </div> 
</div> 

когда я загрузить изображение изменения HTML кода таким образом

<div class="wrapper" style="margin-top:20px;"> 
    <input class="fileUpload" type="file" /> 
    <br /> 
    <div class="image-holder"></div> 
    <img src="blabla/image.jpg" class="thumb-image"> 
    <div> 
     <input style="display:none" class="cancella_immagine" type="button" value="cancella"> 
    </div> 
</div> 

Теперь я хотите использовать функцию JQuery, чтобы скрыть изображение, и я пытаюсь с

$(document).on('click', '.cancella_immagine', function() { 
    $(this).closest('div').find('.thumb-image').hide(); 
}); 

Но это не работает

Answer 1

Попробуйте использовать closest() с селектором,

$(document).on('click','.cancella_immagine', function() { 
    $(this).closest('div.image-holder').find('.thumb-image').hide(); 
}); 

Или вы можете сделать это в другом деле с помощью .prev(),

$(document).on('click','.cancella_immagine', function() { 
    $(this).parent().prev('.thumb-image').hide(); 
}); 

Answer 2

Использование closest('.wrapper') вместо closest('div') как следующее.

$(document).on('click','.cancella_immagine', function() { 
    $(this).closest('.wrapper').find('.thumb-image').hide(); 
});