remove HTML element on click in Angular js

Question

This is my Directive. which display one Div on the body.

app.directive("autosuggest", function($rootScope) {
      return {
            scope: {
              doneFlag      : "=",
              groupFlag     : "=",
              inviteesFlag  : "=",
              init: '&'
            },
            templateUrl : "title.html",
            link: function(scope, element, attrs) { 
                  }

});

And in title.html

<div class="showw">
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

And i include directive like this

<div autosuggest="" done-Flag="1" group-Flag="1"  invitees-Flag="1" selected-Array="" ></div>

so when i click on image then this <div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div> parts gets remove from body. like remove element in Javascript. how i will achive this in angularJS?

Answer 1

For clearing/removing html elements, we can use the following methods

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.empty();  //clears contents

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.remove();   //removes element

Reference : http://blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp

Answer 2

Use below in your directive.

Directive

app.directive("removeMe", function() {
      return {
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }

});

HTML

<div class="showw" remove-me>
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

Working Demo