极客教程如何使用AngularJS从DOM中移除HTML元素
在这篇文章中，我们将看到如何在AngularJS的帮助下从DOM中移除特定的HTML元素，同时通过实例了解其实现。为此，我们可以使用remove()方法来帮助移除所有被选中的元素，包括所有文本。
语法:
selectObject.remove();
方法：在这里，首先我们选择我们想要删除的元素。然后我们使用remove()方法来删除该特定元素。
例子1：这个例子描述了在AngularJS中从DOM中删除HTML元素。在这里，class(‘p’)的元素已经被移除。
<!DOCTYPE HTML>
<html>
<head>
<title>Remove a HTML element from DOM</title>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<style>
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
h1 {
color: green;
}
.p {
border: 1px solid black;
}
</style>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function (scope) {
scope.removeEl = function () {
var el = angular.element(
document.querySelector('.p'));
el.remove();
};
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Remove a HTML element from DOM</h3>
<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>
输出:
例子2：这个例子描述了在AngularJS中从DOM中删除HTML元素。**** 这里Id(‘p’)的元素已经被remove()方法移除。
<!DOCTYPE HTML>
<html>
<head>
<title>
Remove a HTML element from DOM
</title>
<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>
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
h1 {
color: green;
}
#div {
height: 50px;
width: 100px;
margin: 0 auto;
background: green;
color: white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Remove a HTML element from DOM</h3>
<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>
输出:
