Removing items from the DOM / View using AngularJS and not jQuery

Question

I was wondering, say I have the following DOM structure in my View / Webpage

<div>
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="deleteThisDiv()">X</a>
</div>
<div>
    <p>I am some text but this Div may have more content like IMG or inputs</p>
    <a href="" ng-click="deleteThisDiv()">X</a>
</div>

I'd like to add a method on the controller called deleteThisDiv that will remove the parent DIV of the href and all the DIV's contents (including the href I just clicked). This is easy with jQuery as I could just get the parent and use $target.remove() however I want to get out of the jQuery way of things and remove the item using AngularJS best practice. I know I could use jqLite as $target.remove() is supported and I guess I could climb the DOM tree to find the DIV but is there a better* way to do this (like using ng-show/ng-hide, etc)? Please note that I can add IDs to my HTML but I don't want to populate the HTML structure with IDs just yet.

When I say better I mean an AngularJS way! I just want to get out of the mind set of using jQuery for these things... please note that the HTML is coded and not produced by an array or looping through objects, etc

CodePrimate · Accepted Answer · 2014-02-18 17:55:12Z

1

I believe the "angular way" would be to have the divs show conditionally using the ng-show directive if what you're looking for is a function that can show/hide the div. If you're looking to literally either have one or the other div in the DOM I'd take a look at ng-if or ng-switch.

Note that ng-if and ng-switch only evaluates once meaning you wouldn't be able to have a function that "removed" a DIV. ng-show on the other hand is evaluated on each $digest cycle

<div ng-show="someExpression>
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="someExpression = !someExpression">X</a>      
    <!--Clicking this will show/hide the div--> 
</div>

<div ng-if="someExpression">
    <p>I am some text but this Div may have more content like IMG or inputs</p>
    <a href="" ng-click="someExpression = !someExpression">X</a>      
    <!--Clicking this has no effect because ng-if is only evaluated once-->
</div>

answered Feb 18, 2014 at 17:55

CodePrimate

6,66613 gold badges50 silver badges86 bronze badges

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

1 Comment

Mike Sav Over a year ago

Thanks for the advice, I was thinking of having a directive on the DIV that injects a link using transclusion and when I click this link I can delete the DIV removing it from the DOM

TonyWilk · Accepted Answer · 2014-02-18 17:52:40Z

0

Use ng-show...

<div ng-show="showFlag">
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="showFlag=false">X</a>
</div>

in your controller you'll need to define the variable like:

$scope.showFlag= true;

answered Feb 18, 2014 at 17:52

TonyWilk

1,4771 gold badge10 silver badges13 bronze badges

Comments

Ammar Khan · Accepted Answer · 2014-02-18 18:04:29Z

0

You might be looking for this one.

module.controller('TestController',
        function TestController($scope) {

            $scope.deleteThisDiv = function ($event) {
                $event.target.parentNode.parentNode.removeChild($event.target.parentNode);

            };
        });

answered Feb 18, 2014 at 18:04

Ammar Khan

3561 gold badge10 silver badges27 bronze badges

1 Comment

Sergiu Paraschiv Over a year ago

Technically that still is a form of jQuery: docs.angularjs.org/api/ng/function/angular.element

koolunix · Accepted Answer · 2014-02-18 20:48:01Z

0

I use this directive for very similar reasons:

<div destroyOnEvent="destroyThisDiv">
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="$emit('destroyThisDiv')">X</a>
</div>

.directive('destroyOnEvent',function($rootScope) {
    return {
        restrict : 'A',
        link : function($scope,$element,$attrs) {   
            $rootScope.$on($attrs.destroyOnEvent,function() {
                $element.remove();
            });
        }
    }
});

answered Feb 18, 2014 at 20:48

koolunix

1,99516 silver badges25 bronze badges

Collectives™ on Stack Overflow

Removing items from the DOM / View using AngularJS and not jQuery

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related