Aquí la tarea es eliminar un elemento particular del DOM con la ayuda de AngularJS.
Planteamiento: Aquí primero seleccionamos el elemento que queremos eliminar. Luego usamos el método remove() para eliminar ese elemento en particular.
Ejemplo 1: aquí se ha eliminado el elemento de clase (‘p’).
<!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>
Producción:
Ejemplo 2: Aquí el elemento de Id(‘p’) ha sido eliminado por el método remove().
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA