Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Remove element – JavaScript

Summary

Given the following HTML code:

<div>
  <p>Child paragraph</p>
</div>

You can use the querySelector() and removeChild() methods to remove an element:

// Select the parent element first
let parentDiv = document.querySelector('div');

// Select the child element
let childParagraph = document.querySelector('p');

// Remove the child element
parentDiv.removeChild(childParagraph);

Details

You can also remove an element directly without selecting its parent by using the remove() method.

// Select the child element
let childParagraph = document.querySelector('p');

// Remove the child element
childParagraph.remove();

Demo

Exercises

Recreate the JS code from the Demo section in your JS file.

References

Manipulating documents on MDN (see the section called Moving and removing elements)

removeChild() method on MDN

remove() method on MDN

Back to: JavaScript Reference > JS DOM