Remove DOM-Element with AngularJS

Question

I'm trying to remove a navbar based on the current location path.

This is what I have so far:

angular.module('myModule')
  .controller('MainController', function ($location, $document) {
    if ($location.path().indexOf('resetpass') > -1) {
      var navbar = angular.element($document.querySelector(".top-navbar"));
      navbar.remove();
    }
  });

With this approach the console says:

angular.js:14110 TypeError: $document.querySelector is not a function
at new <anonymous> (main.controller.js:6)
at Object.invoke (angular.js:4762)
at $controllerInit (angular.js:10518)
at nodeLinkFn (angular.js:9416)
at compositeLinkFn (angular.js:8757)
at compositeLinkFn (angular.js:8760)
at publicLinkFn (angular.js:8637)
at angular.js:1808
at Scope.$eval (angular.js:17913)
at Scope.$apply (angular.js:18013)

What am I doing wrong?

ZEE · Accepted Answer · 2016-12-06 16:26:19Z

5

use ngIf in your DOM element and do something like this:

Template :

<element ng-if="hideElemet"></element>

Controller :

if ($location.path().indexOf('resetpass') > -1) {
      $scope.hideElement = false
}

ngIf will remove the element from the DOM

edited Dec 6, 2016 at 16:26

answered Dec 6, 2016 at 15:46

ZEE

5,8994 gold badges41 silver badges55 bronze badges

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

Comments

Petya Naumova · Accepted Answer · 2016-12-06 15:49:56Z

3

Try with document, not $document.

var navbar = angular.element(document.querySelector(".top-navbar")).remove();

answered Dec 6, 2016 at 15:49

Petya Naumova

7172 gold badges11 silver badges23 bronze badges

2 Comments

Codehan25 Over a year ago

..the console error is gone, but the navbar is still visible.

Petya Naumova Over a year ago

still visible after you execute navbar.remove(); ?

sledsworth · Accepted Answer · 2016-12-06 15:55:54Z

0

I feel like Ze Rubeus way of hiding the navbar makes more sense, but if you want to continue with what you have this should work:

angular.module('myModule')
 .controller('MainController', function ($location, $document) {
   if ($location.path().indexOf('resetpass') > -1) {
     var navbar = angular.element($document[0].querySelector(".top-navbar"));
     navbar[0].remove();
   }
});

Angular wraps all of it's DOM elements, so to access the element directly you need to grab the first element.

answered Dec 6, 2016 at 15:55

sledsworth

1431 silver badge8 bronze badges

1 Comment

Codehan25 Over a year ago

..don't know why, but it won't work. I go with the approach of Ze Rubeus..

Collectives™ on Stack Overflow

Remove DOM-Element with AngularJS

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related