How to empty the content of an element using AngularJS ?

Last Updated : 15 Jul, 2025

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>