Delete image on clicking "X" mark on right top of image
<p>I want to delete a image by clicking "X" mark on right top of image, I followed this fidddle for CSS <a href="http://jsfiddle.net/yHNEv/" rel="nofollow">http://jsfiddle.net/yHNEv/</a>.</p>

<p><strong>HTML code:</strong></p>

<pre><code> &lt;div class="img-wrap"&gt;
  &lt;span  ng-click="deleteLocalfile()" class="close"&gt;&amp;times;&lt;/span&gt;
  &lt;a id="div2" href&gt;&lt;img ng-src="{{imagepreviewUrl}}" style="width: 100px; height: 100px;" alt=""&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Controller Code:</strong></p>

<pre><code> $scope.deleteLocalfile = function(){

  var result = document.getElementsByClassName("close");
  var wrappedResult = angular.element(result);

  wrappedResult.remove();

}
</code></pre>

<p>The above Code deleteting the "X"  mark on clicking it, not the Image, however after clicking "X" i am getting an event over here.</p>

<p><strong>The 2nd Approach:</strong></p>

<pre><code> &lt;div class="img-wrap"&gt;
  &lt;span   class="close"&gt;&amp;times;&lt;/span&gt;
  &lt;a  ng-click="deleteLocalfile()" id="div2" href&gt;&lt;img ng-src="{{imagepreviewUrl}}" style="width: 100px; height: 100px;" alt=""&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>2nd Approach Controller Code</p>

<pre><code>$scope.deleteLocalfile = function(){
var result = document.getElementsById("div2");
 var wrappedResult = angular.element(result);
 wrappedResult.remove();
}
</code></pre>

<p>Here I am not getting event on clicking "X" mark, getting an event on image click deleting only the Image retaining "X" mark.</p>