Remove element by id in JavaScript?


The Remove Element By Id In JavaScript method is a powerful tool for manipulating the DOM (Document Object Model). It allows you to remove elements from the page by their id. This can be useful when removing unwanted elements or creating dynamic content on the fly. The syntax is simple, and this article will explain how to use it in more detail.

In order to make a website interactive, JavaScript provides it with a number of functionalities. Removing a node or an element from a web page is one of the most fundamental features offered by JavaScript.

Let's go over how to remove an element in JavaScript using the steps provided below.

  • getElementByID method

  • remove() method

let’s dive into the article to get better understanding on how to remove element by id in JavaScript.

The getElementByID method

As the name implies, the getElementsById JavaScript method is used to locate an element's Id and return it to a variable. The value of the returned element can be used for a number of tasks.

Syntax

Following is the syntax for getElemnetByID

The remove() method

An element or node can be removed using JavaScript's remove() method. There are no parameters required, and no value is returned.

Syntax

Following is the syntax for remove()

element.remove()

let’s look into the following examples to know more about to remove element by id in JavaScript.

Example

In the following example we are running a simple script to remove an element

<!DOCTYPE html>
<html>
<body>
   <h1 id="tutorial">welcome</h1>
   <button onclick="myRemoveFunction()">Click To Remove</button>
   <script>
      function myRemoveFunction() {
         var textRemove = document.getElementById("tutorial");
         textRemove.remove();
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of text along with a button on the webpage. When the user clicks the button, the event is triggered, and the <h1> text on the webpage is removed.

Example

Consider the following example using input field along with remove() method.

<!DOCTYPE html>
<html>
<body>
   <label for="fname">First name:</label>
   <input type="text" id="fname" name="fname"><br><br>
   <button onclick="myRemoveFunction()">Click To Remove</button>
   <script>
      function myRemoveFunction() {
         var textRemove = document.getElementById("fname");
         textRemove.remove();
      }
   </script>
</body>
</html>

On running the above script, the web-browser displays the input field along with the click button. When the user clicks the button, the event gets triggered and removes the input text area box on the webpage.

Example

Let’s consider the another example where we are using div along with remove()

<!DOCTYPE html>
<html>
<body>
   <div id="tutorial">
      <input type="text"><br>
      <input type="text"><br>
      <input type="radio"><br>
      <input type="text"><br>
      <input type="radio"><br>
   </div><br>
   <span id='totalNumberOfTextBox'></span>
   <button onclick="myRemoveFunction()">Click To Remove</button>
   <script>
      function myRemoveFunction() {
         var textRemove = document.getElementById("tutorial");
         textRemove.remove();
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of input fields, radio buttons, and a click button on the web-browser. When the user clicks the button, an event gets triggered that removes all the content on the web-browser.

Updated on: 18-Jan-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements