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