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>      

Try it »

If you run the above example it will remove the div and produce output something like this –

Angularjs remove html element from dom


Advertisements

Add Comment

📖 Read More