AngularJS: Removing HTML element from DOM, but not its content

Question

I'm using AngularJS and I've got a doubt.

I have something like this:

<a href="#">
 <p>Hello World!</p>
</a>

I want to remove the anchor, but not its content. If I use ng-show/ng-hide, according to the condition it removes everything, the anchor and even the paragraph.

How can i remove just the anchor keeping the content displayed (but unlinked)?

Thanks!

I would suggest that you use a directive for this kind of thing. — Steve Lang
– Steve Lang, Commented Sep 12, 2014 at 11:40
why can't you remove it from template? or use ng-if or ng-switch You haven't provided any conditions — charlietfl
– charlietfl, Commented Sep 12, 2014 at 11:47
When you want it to happen? On page load, or you want to be able to return element back on some condition? — dfsq
– dfsq, Commented Sep 12, 2014 at 11:53

Joao Leal · Accepted Answer · 2014-09-12 11:41:25Z

2

use ng-href and an expression:

<a ng-href="{{show()? '#' : ''}}">
 <p>Hello World!</p>
</a>

answered Sep 12, 2014 at 11:41

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

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

3 Comments

Rubén Jiménez Over a year ago

But the content (<p></p>) will remain linked, won't it? What i want is removing the anchor totally.

noypi Over a year ago

his answer will work... i was going to answer his, here's a plnkr related to this answer... plnkr.co/edit/bGn2csAF3JtZpEql9O9s?p=preview

Joao Leal Over a year ago

The tag will remain there, but since the href attribute will be empty, there won't be any link. If you want to completely remove the anchor tag, then I recommend using a custom directive.

Satpal · Accepted Answer · 2014-09-12 11:46:57Z

1

Might not be best approach.

You can use

<a ng-if="condition == false">
 <p>Hello World!</p>
</a>    
<p ng-if="condition == true">Hello World!</p>

In place of ngIf you can use ngShow or ngHide

answered Sep 12, 2014 at 11:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

1 Comment

Rubén Jiménez Over a year ago

Yep, it occurred to me, but i also thought it may not be the best approach... Anyway, if there is not any best answer, that one will be what i'll use.

Collectives™ on Stack Overflow

AngularJS: Removing HTML element from DOM, but not its content

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related