Jquery hide closest("div") not working

I've a fileupload like this

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

when I upload an image the html code change in this way

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

Now I'd like to use jquery function to hide the image and I'm trying with

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

But it doesn't work

Answers 1

  • Use closest('.wrapper') instead of closest('div') like following.

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

Related Articles