How to remove a div containing an image when click on "X" using jquery?

Question

I have made a box with an image in it, and an X at the right top corner. and when I click on it I want it to delete the image, box and the X. However nothing happens. Please don't be to harsh I'm new to Jquery and javascript.

<span class="removethis">    
<div class="imformationbox1" >  
<div class="col-lg-12">
<button type="button" class="deletebutton" id="" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;<  /span></button>    
<a href="#" id="" title="Image 2"><img src="http://placehold.it/250x250 class="thumbnail img-responsive"></a>    
</div>
</div> 
</span>

<script>
$( ".deletebutton" ).click(function() {
$( ".removethis" ).remove();
});
</script>

Answer 1

its very simple .. just use closest()

<script>
$(document).on('click',".deletebutton" ,function() {
 $(this).closest(".removethis" ).remove();
});
</script>

or you can use parent()

<script>
    $(document).on('click',".deletebutton" ,function() {
     $(this).parent().parent().parent().remove();
    });
</script>

if you dynamically append this data just use

$(document).on('click',".deletebutton" , function(){});