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?

Jay Shukla · Accepted Answer · 2018-07-05 08:53:15Z

24

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

edited Jul 5, 2018 at 8:53

answered Feb 6, 2014 at 6:47

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe Enzminger Over a year ago

This will only remove the IMG element, but that is easily addressed.

Joe Enzminger Over a year ago

Also, jquery is unnecessary. You can just use element.parent().remove() inside of the click handler.

hassassin · Accepted Answer · 2014-02-06 06:45:37Z

16

You can simply create a directive, that adds a function that will remove the html of the element. Then you can just stick it on an ng-click. I made a fiddle here: http://jsfiddle.net/qDhT9/

// in the directive
scope.remove = function() {
    elt.html('');
};
// in the dom
<div remove-on-click ng-click="remove()"> 
    REMOVE ME 
</div>

Hope this helped!

answered Feb 6, 2014 at 6:45

hassassin

5,0641 gold badge32 silver badges39 bronze badges

4 Comments

Proxy_Server Over a year ago

Also @hassassin can we apply ng class to custom directive. Like

<div id="autosuggest" class="autosuggest"  ng-class="{'Show-Class':displayDivCss==true}"  autosuggest="" done-Flag="1" group-Flag="1"  invitees-Flag="1" selected-Array="" ></div>

hassassin Over a year ago

sure, it will control the class on the div

Proxy_Server Over a year ago

this is not working. i was check condition also inside ng-class.but it will not apply show-class to div.so can you tell me other way to apply conditional class.

hassassin Over a year ago

ng-class is correct. This is a different question than your original, but here is a working example jsfiddle.net/qDhT9/6

Aparna · Accepted Answer · 2015-08-26 04:28:07Z

11

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

answered Aug 26, 2015 at 4:28

Aparna

7836 silver badges10 bronze badges

1 Comment

Aparna Over a year ago

It used to work with Angular 1. Not sure if there are changes with newer versions. remove function should still be good I guess!

Richard Smith · Accepted Answer · 2015-12-07 12:50:05Z

1

A more robust adaptation of Aparna's answer, you can use the $document service which acts as a wrapper for the browser's 'window.document' object. So instead of accessing 'document' variable globally you can access the '$document' object as a dependency. This helps to make your code more testable.

eg:

app.controller('exampleCtrl', function($scope, $document) {
  $scope.deleteArticle = function(id) {
    var articleRow = angular.element($document[0].querySelector('div[data-articleid="'+id+'"]'));
    articleRow.remove();
  };
});

edited Dec 7, 2015 at 12:50

Richard Smith

50.3k7 gold badges97 silver badges96 bronze badges

answered Dec 7, 2015 at 12:02

David Brewer

1315 bronze badges

Collectives™ on Stack Overflow

remove HTML element on click in Angular js

4 Answers 4

2 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related