JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="parent-node">
  <p>Child of parent node</p>
  <div class="child-node">
    <p>Child of child node</p>
    <button>Delete</button>
    <div class="grand-child-node">
      <p>Grand Child of parent node</p>
    </div>
  </div>
</div>

CSS

body {
  font-family: "Helvetica Neue"
}

JavaScript

function deleteTree(elem) {
	while (elem.hasChildNodes()) {
  	elem.removeChild(elem.firstElementChild)
  }
}

document.querySelector("button").addEventListener("click", (e) => {
	const parent = document.querySelector(".parent-node");
  const currentTarget = e.target;
  if (parent != currentTarget && parent.contains(currentTarget)) {
  	parent.removeChild(deleteTree(currentTarget.parentNode));
  }
});