javascript - 使用javascript单击窗口中的外部元素来删除元素

Question

我想要，那个用户点击输入类型=“复选框”，显示“文本区域”。然后当用户点击除相同“textarea”之外的任何地方时，相同的“textarea”被隐藏。请帮助我完成这项工作。如果您有解决此问题的建议，谢谢您告诉我。预先感谢您的合作。

var requiredDescription = document.querySelectorAll(".required-description");      
requiredDescription.forEach(item => {
    item.addEventListener('click', function(){            
        item.classList.toggle('active');            
    });        

});
window.addEventListener("click", function(event){
          var desText = document.querySelector('input.active');
          if (event.target !== desText) {
              description.classList.remove('show');                            
          }
      });

.items{
    border: 1px solid var(--txt);
    padding: .5rem;
    border-radius: 10px;
}

p > span.label{
    width: 30%;
    display: block;
}

p > span.label-items{
    width: 70%;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

p > span.label-items > lable.label-item{
    display: flex; 
    align-items: center; 
    width: 100%;
}

.description{
    border: 2px solid var(--c2);
    background-color: #e6eef7;
    border-radius: 10px;
    outline: none;
    position: absolute;
    left: 20%;
    top: 10%;
    width: 50%;
    z-index: 1;
    padding: 1rem;
    display: none;
}

p > span.label-items > label.label-item > input.active ~ .description{
    display: block;
}

<p class="items">
   <span class="label">example1</span>
   <span class="label-items">
      <label class="label-item" for="Others">
        <input type="checkbox" name="Others" id="Others" class="required-description">
         Others
        <textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>                                            
     </label>
   </span>                                    
</p>

<p class="items">
   <span class="label">example2</span>
   <span class="label-items">
       <label class="label-item" for="Yes">
          <input type="checkbox" name="Yes" id="Yes" class="required-description">
          Yes
          <textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
       </label> 
   </span>
</p>

<p class="items">
    <span class="label">example3</span>
    <span class="label-items">
      <label class="label-item" for="ok">
         <input type="checkbox" name="ok" id="ok" class="required-description">
         Yes
          <textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
     </label> 
    </span>
                                    
                                    
</p>

标签： javascripthtmljquerycss

Answer 1

您可以将单击事件添加到body元素并检查单击的元素以删除类。

您可以尝试以下方法：

var requiredDescription = document.querySelectorAll(".required-description");      
requiredDescription.forEach(item => {
    item.addEventListener('click', function(){            
        item.classList.toggle('active');            
    });        
});
document.querySelector('body').addEventListener('click', function(e){
   if(!(e.target.nodeName == 'SPAN' || e.target.nodeName == 'INPUT' || e.target.nodeName == 'TEXTAREA')){ 
requiredDescription.forEach(item => {
       item.classList.remove('active');
       document.querySelectorAll(":checked").forEach(function(chk){
        chk.checked = false;
       });
    });
  }
});

.items{
    border: 1px solid var(--txt);
    padding: .5rem;
    border-radius: 10px;
}

p > span.label{
    width: 30%;
    display: block;
}

p > span.label-items{
    width: 70%;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

p > span.label-items > lable.label-item{
    display: flex; 
    align-items: center; 
    width: 100%;
}

.description{
    border: 2px solid var(--c2);
    background-color: #e6eef7;
    border-radius: 10px;
    outline: none;
    position: absolute;
    left: 20%;
    top: 10%;
    width: 50%;
    z-index: 1;
    padding: 1rem;
    display: none;
}

p > span.label-items > label.label-item > input.active ~ .description{
    display: block;
}


I want, That user click on input type="checkbox", "textarea" is displayed. then when user click on anywhere except same "textarea", same "textarea" is hidden. please help me that do this work. If you have a suggestion for solving this problem, thank you for letting me know. Thank you in advance for your cooperation.

<p class="items">
   <span class="label">example1</span>
   <span class="label-items">
      <label class="label-item" for="Others">
        <input type="checkbox" name="Others" id="Others" class="required-description">
         Others
        <textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>                                            
     </label>
   </span>                                    
</p>

<p class="items">
   <span class="label">example2</span>
   <span class="label-items">
       <label class="label-item" for="Yes">
          <input type="checkbox" name="Yes" id="Yes" class="required-description">
          Yes
          <textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
       </label> 
   </span>
</p>

<p class="items">
    <span class="label">example3</span>
    <span class="label-items">
      <label class="label-item" for="ok">
         <input type="checkbox" name="ok" id="ok" class="required-description">
         Yes
          <textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
     </label> 
    </span>
                                    
                                    
</p>