JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" style="display: block; background-color: grey;">
  <div id="one1">
    <div id="one2" style="background-color: red;">
      <p>when click here should not hide
      <br>
      <br>
      when click here should not hide
      <br>
      when click here should not hide
      <br>
      when click here should not hide
      </p>
    </div>
  </div>
  <div id="one3">
    <p>when click here should not hide</p>
  </div>
<div id="clickToHide" style="background-color: white;">
  <p>when click here should hide</p>
  <div id="xyz" style="background-color: green;">
    <p>when click here should hide</p>
  </div>
  <p>when click here should hide</p>
</div>
</div>

JavaScript

document.getElementById('clickToHide').addEventListener('mouseup', function(event){
  var wholeElement = document.getElementById('main');
  wholeElement.style.display = 'none';
});