javascript - 如何使用 JavaScript 在单击子元素时关闭父 div？

Question

我有四个具有相同类但不同 ID 的 div 元素。在每个 div 内，我都有一个段落元素和一个 span 元素。 Span 具有相同的类但不同的 id。在跨度内，我使用 fa-times(close) 图标来关闭外部 div。如何用 JavaScript 做到这一点？

我尝试使用类名声明变量，但它返回一个 HTML 集合数组。但是，我可以通过定位数组内部的每个元素来隐藏父 div。但我知道这是错误的方法。

代码

function close() {
  var clost = document.getElementsByClassName('span');
  clost[0].parentElement.style.display = 'none';
}

<div class="div" id="div_1">
  <p>Please Enter a Keyword</p>
  <span class="span" onclick="close()" id="span_1">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

<div class="div" id="div_2">
  <p>Enter your name</p>
  <span class="span" onclick="close()" id="span_2">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

<div class="div" id="div_3">
  <p>Enter your city</p>
  <span class="span" onclick="close()" id="span_3">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

<div class="div" id="div_4">
  <p>Enter your country</p>
  <span class="span" onclick="close()" id="span_4">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

错误:找不到未定义的父级

预期结果:所有 div 应在单击 fa 图标时单独关闭。”

Answer 1

首先，close 不能用作函数名称，因为您会遇到冲突...因此请将其更改为 closeDiv 等其他名称。

使用当前代码和普通 JS 执行此操作的最简单方法是将 this 作为参数包含在 closeDiv() 中，然后直接使用它。 .

(注意，我已将单词 Text 添加到每个 span 中，这样您实际上就有了可以点击的内容)

function closeDiv(spn) {
  spn.parentNode.style.display = "none";
}

<div class="div" id="div_1">
  <p>Please Enter a Keyword</p>
  <span class="span" onclick="closeDiv(this)" id="span_1">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_2">
  <p>Enter your name</p>
  <span class="span" onclick="closeDiv(this)" id="span_2">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_3">
  <p>Enter your city</p>
  <span class="span" onclick="closeDiv(this)" id="span_3">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_4">
  <p>Enter your country</p>
  <span class="span" onclick="closeDiv(this)" id="span_4">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<小时/>

如果您可以选择使用 jQuery，它会变得更简单......

$(function(){
  $(".span").on("click", function(e) {
    $(this).parent().hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div" id="div_1">
  <p>Please Enter a Keyword</p>
  <span class="span" id="span_1">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_2">
  <p>Enter your name</p>
  <span class="span" id="span_2">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_3">
  <p>Enter your city</p>
  <span class="span" id="span_3">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>

<div class="div" id="div_4">
  <p>Enter your country</p>
  <span class="span"  id="span_4">
  <i class="fa fa-times" aria-hidden="true">Text</i></span>
</div>