极客教程如何使用AngularJS清空一个元素的内容
在这篇文章中，我们将看到如何使用AngularJS删除HTML DOM中的一个元素的内容。这个任务可以通过实现jQuery empty()方法来完成，该方法可以移除所选元素的所有子节点和其内容。
语法:
element.empty();
参数：该方法不接受任何参数。
返回值：该方法返回选定的元素，以及由 empty() 方法所做的指定修改。
方法：首先选择其内容要被清空的元素。然后使用empty()方法 **** 来删除该元素的内容。
例子1：在这个例子中，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>
<h3>
Empty the content of an element
</h3>
<div id="div">
GeeksforGeeks <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>
输出:
例子2：在这个例子中，一个元素的内容和它的孩子都被清空了。
<!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>
<h3>
Empty the content of an element
</h3>
<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>
输出:
