How to hide element even from HTML source code?

Question

In a webpage that I am building I am using AngularJS ng-hide to show-hide an element(basically a button). But what it actually does is simply add a class ng-hide to that element.

So anybody can go to developer tools and remove the class ng-hide and the button will be visible. I know using jQuery I can completely remove the element from HTML but is there a way to do that in angular?

Before it looks like this:

<button ng-hide="hide">Button</button>

And after hiding it looks like:

<button class="ng-hide">Button</Button>

Andy Gaskell · Accepted Answer · 2015-05-07 05:15:18Z

5

You are looking for ngIf.

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
  This is removed when the checkbox is unchecked.
</span>

answered May 7, 2015 at 5:15

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

1 Comment

Zee Over a year ago

Never knew ng-if actually removes the element from DOM. Thanks.

OddDev · Accepted Answer · 2015-05-07 05:16:09Z

0

This should work:

angular.element("button").remove();

answered May 7, 2015 at 5:16

OddDev

3,7946 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to hide element even from HTML source code?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related