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