How to Remove HTML element from DOM using AngularJS ?
Here the task is to remove a particular element from the DOM with the help of AngularJS.
Approach: Here first we select the element that we want to remove. Then we use remove() method to remove that particular element.
Example 1: Here the element of class(‘p’) has been removed.
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.removeEl = function () { var el = angular.element( document.querySelector('.p')); el.remove(); }; }); </script> <style> .p { border: 1px solid black; } </style></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Remove a HTML element from DOM </p> <div ng-app="app"> <div ng-controller="controller"> <p class="p">This is paragraph</p> <input type="button" value="Click here" ng-click="removeEl()"> </div> </div></body> </html> |
Output:
Example 2: Here the element of Id(‘p’) has been removed by remove() method.
<!DOCTYPE HTML><html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.removeEl = function () { var el = angular.element( document.querySelector('#div')); el.remove(); }; }); </script> <style> #div { height: 50px; width: 100px; margin: 0 auto; background: green; color: white; } </style></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Remove a HTML element from DOM </p> <div ng-app="app"> <div ng-controller="controller"> <div id="div">Element</div> <br> <input type="button" value="Click here" ng-click="removeEl()"> </div> </div></body> </html> |
Output:
