JavaScript Manipulating Document Elements

Deletion

We can delete nodes from our DOM tree by using by either selecting a parent node and calling its removeChild method or directly selecting the node we want to delete and call its remove method.

Remove child

The removeChild method removes the specified child node from the parent.

Code example

Copy
<div id="target">
  <h2>Abc</h2>
</div>

<script>
  const parent = document.querySelector("#target")
  const child = parent.querySelector("h2")
  parent.removeChild(child)
</script>

which which removes the <h2> element from the #target divider parent node.

Remove self

The remove method removes a node from the tree it belongs it.

Code example

Copy
<div id="target">
  <h2>Abc</h2>
</div>

<script>
  const h2 = document.querySelector("h2")
  h2.remove()
</script>

which which removes the <h2> element from the #target divider parent node.