Cerebrum

Remove Nodes

3 min read

How do you add and remove nodes from the DOM with appendChild() and removeChild()?

There will be times where you will need to add or remove nodes from the DOM and there are a couple of Web APIs you can use.

In this lecture video, we will cover the appendChild() and removeChild() methods.

The appendChild() method is used to add a node to the end of the list of children of a specified parent node.

Here is the basic syntax for the appendChild() method:

parentNode.appendChild(newNode);

Let’s take a look at an example to better understand how to use the appendChild() method.

In this example, we have an unordered list element with an ID of desserts inside the HTML. This list contains two list items of Cake and Pie:

<ul id="desserts">
  <li>Cake</li>
  <li>Pie</li>
</ul>

To access that list inside the JavaScript file, we can use the getElementById() method:

const dessertsList = document.getElementById("desserts");

We have a variable called dessertsList that stores the reference to the ul element with the ID of desserts.

Then we need to create a new list item element using the createElement() method:

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

The following code will create a new list item element and store it in a variable called listItem.

To add that node to the end of the list of children of the ul element, we can use the appendChild() method:

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");
 
dessertsList.appendChild(listItem);

If you were to run this code, you will see that a new list item element is added to the end of the list of children of the ul element.

The problem is that the new list item element is empty. To add text content to the new list item element, you can use the textContent property:

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");
 
listItem.textContent = "Cookies";
dessertsList.appendChild(listItem);

Now the list will show Cake, Pie, and Cookies.

To remove a node from the DOM, you can use the removeChild() method.

Here is the basic syntax for the removeChild() method:

parentNode.removeChild(childNode);

Let’s take look at an example where we want to remove that last paragraph element from this section element:

<section id="example-section">
  <h2>Example sub heading</h2>
  <p>first paragraph</p>
  <p>second paragraph</p>
</section>

We can access the section element inside of the JavaScript file using the getElementById() method:

const sectionEl = document.getElementById("example-section");

Once we have the reference to the section element, we can then access that last paragraph using the querySelector() method:

const sectionEl = document.getElementById("example-section");
const lastParagraph = document.querySelector("#example-section p:last-of-type");

We are using the :last-of-type pseudo-class to select the last paragraph element inside the section element.

Now that we have the parent and child nodes, we can remove the last paragraph element from the section element using the removeChild() method:

const sectionEl = document.getElementById("example-section");
const lastParagraph = document.querySelector("#example-section p:last-of-type");
 
sectionEl.removeChild(lastParagraph);

Here is the new HTML markup after removing the last paragraph element:

<section id="example-section">
  <h2>Example sub heading</h2>
  <p>first paragraph</p>
</section>

So, when might you want to add or remove nodes from the DOM?

If you’re working with dynamic content, you might need to add or remove nodes from the DOM. Real world examples include shopping carts, to-do lists, and social media feeds.

Graph View

Backlinks