Skip to main content

Using removeChild in JavaScript DOM

In this tutorial, we will learn how to use the removeChild method in JavaScript to remove HTML elements from the DOM. We'll cover the basics of the removeChild method and provide sample code with explanations.

What is removeChild?​

The removeChild method is a built-in JavaScript DOM method that allows you to remove an existing HTML element from the DOM. You can use the removeChild method to create dynamic web pages by removing content from the DOM as needed.

Sample Code: Using removeChild​

Let's say we have the following HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>removeChild Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>
  </body>
</html>

To use removeChild to remove an HTML element from the DOM, you'll need to include a JavaScript <script> tag in your HTML document. For this example, we will add an inline script, although it's generally recommended to use external JavaScript files for larger projects.

Here's how you can remove the p element with the ID firstParagraph from the DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>removeChild Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>

    <script>
      // Select the element with the ID "mainContainer" and "firstParagraph"
      var mainContainer = document.getElementById('mainContainer');
      var firstParagraph = document.getElementById('firstParagraph');

      // Remove the first paragraph element using removeChild
      mainContainer.removeChild(firstParagraph);
    </script>
  </body>
</html>

After running this code, the p element with the ID firstParagraph will be removed from the DOM.

Live Playground, Try it Yourself

Conclusion​

The removeChild method is a powerful tool for removing HTML elements from the DOM, allowing you to create dynamic and adaptable web pages. By mastering this method, you can create interactive and engaging web experiences that respond to user input and adapt to changing content needs.