JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  Haha, I'm so random!
</div>
<button>
  Click me
</button>

CSS

body {
  height: 200vh;;
}

TypeScript

let watch = document.querySelector('div');
let button = document.querySelector('button');
let hasBeenRemovedBasic = false;
let hasBeenRemovedVERYLONGTIME = false;
let intersectionObserver = new IntersectionObserver((entries:Array<IntersectionObserverEntry>) => {
  for (let entry of entries) {
    if (entry.isIntersecting) {
      // intersectionObserver.disconnect();
      console.log('Intersecting! Can that be a dirty word?');
      if (hasBeenRemovedBasic) {
      	console.log('You can quote the Bee Gees');
      }
      if (hasBeenRemovedVERYLONGTIME) {
      	console.log('4evah (or just 10 seconds)');
      }
    }
  }
}, {
  threshold: 0,
  rootMargin: `0px`,
});
intersectionObserver.observe(watch);

button.addEventListener('click', () => {
	watch.remove();
  window.requestIdleCallback(() => {
    //hasBeenRemovedBasic = true;
    //document.body.appendChild(watch);
  });
  setTimeout(() => {
  	hasBeenRemovedVERYLONGTIME = true;
  	console.log('Thank you for waiting');
    document.body.appendChild(watch);
  }, 10000);
});