AngularJs Empty Element


AngularJs Empty Element : There are many ways to empty the element’s content. You can use the empty method to remove the content of the element. Here in this tutorial we are going to use the .empty() method to empty the element. You can use our online editor to try and edit the code online.


AngularJs Empty Element Example

You can empty element simply as below –

JavaScript Part

JavaScript Part Contains the following script –

AngularJs Empty Element Example:

 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 $scope.emptyElement = function() {	  
	 var elmn = angular.element( document.querySelector( '#myDiv' ) );
     elmn.empty();
 };
});
</script>

Html Part

Html Part Contains the following html-

AngularJs Empty Element Example:

<div ng-app="myApp">  
<div ng-controller="myController">  
<input type="button" value="Empty Div " ng-click="emptyElement()"> 
<div id="myDiv" style="width:300px;height:400px;background:yellow">
<h3>Heading</h3>
<p>Hello World!</p>
</div>
</div> 

Complete Part

Let us combine the both JavaScript and Html Part –

AngularJs Empty Element Example:

<!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.emptyElement = function() {	  
	 var elmn = angular.element( document.querySelector( '#myDiv' ) );
     elmn.empty();
 };
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
<input type="button" value="Empty Div " ng-click="emptyElement()"> 
<div id="myDiv" style="width:300px;height:400px;background:yellow">
<h3>Heading</h3>
<p>Hello World!</p>
</div>
</div> 

</body>  
</html>      

Try it »

If you run the above example it will produce output something like this and if you click on the empty button it will clear the div content as below –

AngularJs Empty Element


Advertisements

Add Comment

📖 Read More