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

Question

我有四个具有相同类但不同 Id 的 div 元素。在每个 div 中，我有一个段落元素和一个跨度元素。跨度具有相同的类但不同的 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>

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

预期结果：单击 fa 图标时，所有 div 都应单独关闭。”