One of my tasks involves deleting an image by clicking on the "X" mark located at the top right corner of the image. To achieve this, I referred to this CSS fiddle http://jsfiddle.net/yHNEv/.
Sample HTML code:
<div class="img-wrap">
<span ng-click="deleteLocalFile()" class="close">×</span>
<a id="imageLink" href><img ng-src="{{imagePreviewUrl}}" style="width: 100px; height: 100px;" alt=""></a>
</div>
Corresponding Controller Code:
$scope.deleteLocalFile = function() {
var element = document.getElementsByClassName("close");
var wrappedElement = angular.element(element);
wrappedElement.remove();
}
The above code successfully removes the "X" mark when clicked, but it does not delete the image itself. However, a click event is detected upon clicking the "X" mark.
An alternative method:
<div class="img-wrap">
<span class="close">×</span>
<a ng-click="deleteLocalFile()" id="imageLink" href><img ng-src="{{imagePreviewUrl}}" style="width: 100px; height: 100px;" alt=""></a>
</div>
Controller code for the second approach:
$scope.deleteLocalFile = function() {
var element = document.getElementsById("imageLink");
var wrappedElement = angular.element(element);
wrappedElement.remove();
}
In this alternate approach, no click event is triggered when clicking the "X" mark, and instead, an event occurs when the image is clicked, leading to the deletion of only the image while keeping the "X" mark intact.