JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root">
  <div class="first-level">
    <div class="second-level" id="search-target-1">
      <!-- How deep is this element? -->
    </div>
  </div>
  <div class="first-level"></div>
  <div class="first-level">
    <div class="second-level">
      <div class="third-level" id="search-target-2">
        <!-- And this one? -->
      </div>
    </div>
  </div>
</div>

JavaScript

const first = document.getElementById('search-target-1');


let parent = first.parentElement;
let level = 0;
do {
	parent = parent.parentElement;
  level++;
}
while (!parent.classList.contains('root'))

console.log(`The first element is ${level} levels deep inside the root div.`);

const second = document.getElementById('search-target-2');

parent = second.parentElement;
level = 0;
do {
	parent = parent.parentElement;
  level++;
}
while (!parent.classList.contains('root'));

console.log(`The second element is ${level} level deep inside the root div.`);