Aquí la tarea es eliminar el contenido de un elemento en HTML DOM con la ayuda de AngularJS.
Planteamiento: Primero seleccione el elemento cuyo contenido se va a vaciar. Luego use el método empty() para eliminar el contenido del elemento.
Ejemplo 1: en este ejemplo, se vacía el contenido del elemento de ID(‘div’).
<!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.emptyEl = function () {
var el = angular.element(
document.querySelector('#div'));
el.empty();
};
});
</script>
<style>
#div {
height: 80px;
width: 170px;
margin: 0 auto;
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
Empty the content of an element
</p>
<div id="div">
GeeksForGeeks
<br>
<br>
A Computer Science portal
</div>
<br>
<div ng-app="app">
<div ng-controller="controller">
<input type="button"
value="Click here"
ng-click="emptyEl()">
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo se vacía el contenido de un elemento junto con sus hijos.
<!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.emptyEl = function () {
var el = angular.element(
document.querySelector('#div'));
el.empty();
};
});
</script>
<style>
#div {
height: 80px;
width: 170px;
margin: 0 auto;
background: green;
color: white;
}
#div2 {
background: blue;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
Empty the content of an element
</p>
<div id="div">
<h4>This is parent element</h4>
<div id="div2">This is child element</div>
</div>
<br>
<div ng-app="app">
<div ng-controller="controller">
<input type="button"
value="Click here"
ng-click="emptyEl()">
</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