HTML - DOM Element remove() Method

Quiz

The HTML DOM Element remove() method is used to remove an element completely from the webpage. An element is an HTML tag such as a paragraph element (e.g., <p> tag) or headings (e.g., <h1> to <h6> tags).

When this method is called on an element, it removes the element from the DOM, making it no longer part of the webpage.

Syntax

Following is the syntax of the HTML DOM Element remove() method −

element.remove();

Parameters

This method does not accept any parameters.

Return Value

This method does not return any value.

Example 1: Removing List Item (<li>) from List (<ul>)

The following is a basic example of the HTML DOM element remove() method. It removes a single "li" from the list each time the <button> is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element remove()</title>
<style>
   ul li{
       padding: 10px;
   }
   ul li button{
       margin: 0px 10px;
   }
</style>
</head>
<body>
<h3>HTML - DOM Element remove() Method</h3>
<p>Click button and remove the list items!!</p> 
<ul>
   <li>HTML<button onclick="remove(this)">Remove</button></li>
   <li>CSS<button onclick="remove(this)">Remove</button></li>
   <li>JavaScript<button onclick="remove(this)">Remove</button></li>
</ul>
<script>
   function remove(button) {
      button.parentNode.remove();
   }
</script>
</body>
</html>

The above program removes each list item one by one when the "remove" button is clicked.

Example 2: Removing a Paragraph Element

Following is another example of the HTML DOM Element remove() method. We use this method to remove a paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element remove()</title>
</head>
<body>
<h3>HTML DOM Element remove() Method</h3>
<p>Click the button to remove a paragraph!!</p> 
<p id="p">This is a paragraph.</p>
<button onclick="removeParagraph()">Remove Paragraph</button>
<p id="r"></p>
<script>
   function removeParagraph() {
      const paragraph=document.getElementById('p');
      paragraph.remove();
      document.getElementById('r').innerHTML = "Paragraph has been removed";
   }
</script>
</body>
</html>

Once the display button is clicked the paragraph will be removed.

Supported Browsers

Method
remove()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page