How to Remove HTML element from DOM using AngularJS ?

Last Updated : 08 Nov, 2022

In this article, we will see how to remove particular HTML elements from the DOM with the help of AngularJS, along with understanding its implementation through the examples. For this, we can use the remove() method that helps to remove all the selected elements including all the text.

Syntax:

selectObject.remove();

Approach: Here first we select the element that we want to remove. Then we use the remove() method to remove that particular element.

Example 1: This example describes removing the HTML element from DOM in AngularJS. Here the element of class('p') has been removed.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>Remove a HTML element from DOM</title>

    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>

    <style>
        body {
            text-align: center;
            font-family: 'Times New Roman', Times, serif;
        }

        h1 {
            color: green;
        }

        .p {
            border: 1px solid black;
        }
    </style>

    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.removeEl = function () {
                var el = angular.element(
                    document.querySelector('.p'));
                el.remove();
            };
        });
    </script>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Remove a HTML element from DOM</h3>
    
    <div ng-app="app">
        <div ng-controller="controller">
            <p class="p">This is paragraph</p>
            <input type="button" value="Click here" 
                ng-click="removeEl()">
        </div>
    </div>
</body>

</html>

Output:

Example 2: This example describes removing the HTML element from DOM in AngularJS. Here the element of Id('p') has been removed by the remove() method.