Remove Page Content

What's in store!

In this quick section, you're going to learn how to remove content from the page. Specifically, we'll look at these new methods:

.removeChild()
.remove()

In the process, you'll also learn about these two properties:

.firstElementChild
.parentElement

Removing a Child Element

We can use the.removeChild()method to...wait for it...remove a child element. Basically, this is exactly the opposite of the.appendChild()method. So just like the.appendChild()method, the.removeChild()method requires:

a parent element
the child element that will be removed

<parent-element>.removeChild(<child-to-remove>);

Here's the.removeChild()documentation page on MDN:removeChild docs

Let's see how to use this method:

A drawback (and workaround!) with the`.removeChild()`Method

Just like the.appendChild()method, there's a (somewhat minor) drawback to the.removeChild()method. Both methods:

require access to parent to function

However, we don't actually need to have the parent element because there is a workaround! Just like the.firstElementChildproperty can be called on a parent element to access its first element, every element also has aparentElementproperty that refers to its parent! So if we have access to the child element that we're about to add or remove, you can use can use theparentElementproperty to "move focus" to the element's parent. Then we can call.removeChild()(or.appendChild()) on that referenced parent element.

Let's look at an example:

const mainHeading = document.querySelector('h1');

mainHeading.parentElement.removeChild(mainHeading);

Let's walk through this code.

const mainHeading = document.querySelector('h1');

The preceding code will select the first<h1>on the page and stores it in themainHeadingvariable. Now to the next line:

mainHeading.parentElement.removeChild(mainHeading);

This starts with themainHeadingvariable. It calls.parentElement, so the focus of the next code is directed at the parent element. Then.removeChild()is called on the parent element. Finally,mainHeadingitself is passed as the element that needs to be removed from its parent.

So an element uses itself to remove itself from its parent. Pretty cool, huh?

Removing a Child Element (Part 2!)

We went through all of those steps selecting an element, using DOM traversal techniques like.parentElementand.firstElementChild, so that we can remove a child element. I showed you this way so that you can get some exposure and practice to moving around in the DOM.

Now, you might be glad (or frustrated! haha) to find out there's an easier way to do all this! We can move the child element directly with the.remove()method:

const mainHeading = document.querySelector('h1');

mainHeading.remove();

Here's the.remove()documentation page on MDN:.remove() docs