Body Or Window Outside Of Element Remove Same Element With Click In Javascript

want to delete when the user clicks anywhere on the page except the . In addition, the checked to remain in after remove or when the user clicks No, remove checked in and Plea

Solution 1:

Its Very simple,

• Just Create And Put All Items into div#body
• And You Have to use the event window.onclick
• Then create if statement and check event.target.id == "body" ( To Check The Clicked Element is the div#body ( Not Its Children ) )
• if (event.target.id == "body"){ /* Hiding Code */ }

Example

var w = window;
var a = document.getElementById("example");
var c = document.getElementById("okay");
var e = document.getElementById("yes-items");
a.addEventListener("click", check);
w.addEventListener("click", clickedBody);

function clickedBody(event){
  if(event.target.id == "body"){
    hideExplainIfOpened();
  }
}
function check(){
  if(c.checked){ showExplain();}
  else{ hideExplain(); }
}
function hideExplainIfOpened(){ 
  if(!e.classList.contains("d-none")){ 
    hideExplain();
  }
}

function showExplain(){ e.classList.remove("d-none"); }
function hideExplain(){ e.classList.add("d-none"); }

#body {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
  
}
items {
  border: 1px solid red;
  padding: .5rem;
  border-radius: 10px;
}

span.yes-items {
  position: absolute;
  border: 2px solid var(--c1);
  color: var(--txt);
  background-color: #e6eef7;
  top: 20%;
  left: 0;
  width: 94%;
  padding: 1rem;
  border-radius: 10px;
}

.d-none{ display:none; }

span.yes-items input {
  width: auto;
}

<div id="body"> 
<p class="items">
  <span class="label">example</span>
  <span class="label-items" id="example">
    <label class="label-item"  for="okey" id="confirm">
      <input type="radio" class="input"  name="example" value="1" id="okay">
      Yes
    </label>
    <label class="label-item">
      <input type="radio" class="input" name="example" value="0" id="No">
      No
    </label>
  </span>
  <span class="yes-items d-none" id="yes-items"><span>                                            
    <label for="Diabetic">
      <input type="checkbox" name="Diabetic" id="Diabetic">
      1
    </label>
  </span>
  <span>                                            
    <label for="Diabetic">
      <input type="checkbox" name="Diabetic" id="Diabetic">
      2
    </label>
  </span>
  <span>                                            
    <label for="Diabetic">
      <input type="checkbox" name="Diabetic" id="Diabetic">
      3
    </label>
  </span>
  <span>                                            
    <label for="Diabetic">
      <input type="checkbox" name="Diabetic" id="Diabetic">
      4
    </label>
  </span>
  <span>                                            
    <label for="Diabetic">
      <input type="checkbox" name="Diabetic" id="Diabetic">
      other
      <textarea class="explain" placeholder="Define Other" cols="50" rows="3"></textarea>                       
    </label>
  </span>
  </span>
</p>
</div>