How to remove existing HTML elements in JavaScript?


This article discusses about how to delete an existing element in JavaScript. To remove the existing HTML elements, we first need to select the element to be deleted from the document. Then, use the methods like remove() and removeChild() in JavaScript to delete the elements from the document. We’ll discuss about both methods in this article.

Using the remove() method

The remove() method of JavaScript will remove the element from the document. The syntax for the remove method is shown below.

Obj.remove();

Using removeChild() method

The removeChild() method of JavaScript will remove the element from the document. The syntax for the removeChild() method is shown below.

Obj.removeChild()

Let us see the example for these −

Example 1

Using the remove() method

This is an example program on removing an element from the HTML DOM using the remove() method.

<!DOCTYPE HTML>
<html>
<head>
   <title>How to remove an HTML element using JavaScript</title>
</head>
<body style = "text-align:center;">
   <p id="text1"></p>
   <p id="text2">There are two methods to delete HTML elements - remove method and removeChild method.</p>
   <button onClick = "RemoveDOMelement()">click here</button>
   <p id = "text3"></p>
   <!-- Script to remove HTML element -->
   <script>
      var up = document.getElementById('text1');
      var para = document.getElementById('text2');
      var down = document.getElementById('text3');
      up.innerHTML = "Click on the below button to remove an element";
      function RemoveDOMelement() {
         para.remove();
         down.innerHTML = "The paragraph is deleted.";
      }
   </script>
</body>
</html>

On executing the above code, the following output is generated.

After clicking on the button −

Example 2

Using the removeChild() method

The following is an example program on removing an element from the HTML DOM using the removeChild() method.

<html>
<body>
   <div id="new">
      <p id="p1">Tutorix</p>
      <p id="p2">Tutorialspoint</p>
   </div>
   <script>
      var parent = document.getElementById("new");
      var child = document.getElementById("p1");
      parent.removeChild(child);
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The following is another example program on removing an element from the HTML DOM using the removeChild() method.

<!DOCTYPE HTML>
<html>
<head>
   <title> How to remove an HTML element using JavaScript</title>
</head>
<body style = "text-align:center;">
   <p id="text1"></p>
   <p id="text2">There are two methods to delete HTML elements - remove method and removeChild method.</p>
   <button onClick = "RemoveDOMelement()">click here</button>
   <p id = "text3"></p>
   <!-- Script to remove HTML element -->
   <script>
      var up = document.getElementById('text1');
      var para = document.getElementById('text2');
      var down = document.getElementById('text3');
      up.innerHTML = "Click on the below button to remove an element";
      function RemoveDOMelement() {
         para.parentNode.removeChild(para);
         down.innerHTML = "The paragraph is deleted.";
      }
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Before clicking on the button −

After clicking on the button −

Updated on: 06-Sep-2023

39K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements