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);

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

functionshowExplain(){ e.classList.remove("d-none"); }
functionhideExplain(){ 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-itemsinput {
  width: auto;
}

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