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: