Document on click event not firing

I am fetching the image details from database and showing them in grid format. Here is the code.

<div ng-repeat="imageUrl in images" class="col-xs-3 img-wrap">
  
  <span class="close" id="close">&times;</span>
  <div class="my-gallery" itemscope id="grid"   >
 
    <figure itemprop="associatedMedia" >
       
    <a href="{{imageUrl}}" id="thumb" name="{{pid[$index]}}" class="thumbnail " itemprop="contentUrl"  data-id="{{pid[$index]}}" data-size="800x600"> 
    <img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
    </a>
     
    </figure>

</div>
</div>
     

It is working properly. I have added a delete button (x) like this to delete the image. Once user click on the cross button I am planning to run ajax code to delete the image from server.

So, basically I want the click event to delete the image. I tried jQuery code but that is not working. I would prefer an Angular way as I don't want to use jQuery.

$('#close').on('click', function() {
    var id = $(this).closest('.img-wrap').find('img').data('id');
    alert('remove picture: ' + id);
    alert('test');
});

Tried this as well.

$('.img-wrap .closer').on('click', function() {
    var id = $(this).closest('.img-wrap').find('img').data('id');
    alert('remove picture: ' + id);
    alert('test');
});

Edit: I am tried ng-click event and it is working but I want to know how can I hide the respective image in ngclick.

$scope.myFunc = function(btnId) {
            alert(btnId);
    };

As you have pointed out in the question, jQuery is not the correct way to do this, you should be using angular.

You can pass arguments to an ng-click function, and this is how you can pass the id.

<span class="close" id="close" ng-click="remove(pid[$index])">&times;</span>

And in your controller

function remove(id) {
  alert('remove picture: ' + id);
}