Open In App

How to empty the content of an element using AngularJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to remove the content of an element in HTML DOM using AngularJS. This task can be accomplished by implementing the jQuery empty() method that removes all child nodes and their content for the selected elements.

Syntax:

element.empty();

Parameter: This method does not accept any parameter.

Return Value: This method returns the selected element with the specified changes made by the empty() method.

Approach: First select the element whose content is to be emptied. Then use the empty() method to remove the content of the element.  

Example 1: In this example, the content of the element of ID(‘div’) is emptied.

HTML




<!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>


Output:

 

Example 2: In this example, the content of an element along with its children are emptied.

HTML




<!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>


Output:

 



Last Updated : 06 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads