Angularjs remove html element from dom
Angularjs remove html element from dom : There are many ways to remove the element from html dom(document object model). Here in this tutorial we are going to use the .remove() method to remove the element from the document object model.
Angularjs remove html element from dom
You can remove element from dom simply as below –
JavaScript Part
JavaScript Part Contains the following script –
Angularjs remove html element from dom:
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.removeElement = function() {
var elmn = angular.element( document.querySelector( '#myDiv' ) );
elmn.remove();
};
});
</script>
|
Html Part
Html Part Contains the following html-
Angularjs remove html element from dom:
<div ng-app="myApp"> <div ng-controller="myController"> <input type="button" value="Remove Div " ng-click="removeElement()"> <div id="myDiv" style="width:300px;height:400px;background:yellow"></div> </div> |
Complete Part
Let us combine the both JavaScript and Html Part –
Angularjs remove html element from dom:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.removeElement = function() {
var elmn = angular.element( document.querySelector( '#myDiv' ) );
elmn.remove();
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<input type="button" value="Remove Div " ng-click="removeElement()">
<div id="myDiv" style="width:300px;height:400px;background:yellow"></div>
</div>
</body>
</html>
|
If you run the above example it will remove the div and produce output something like this –
Advertisements
