如何用JavaScript点击子元素关闭父级div？多实例问题解决

首先，你的代码出现错误有几个关键原因：

• 函数名用了close，这和浏览器内置的window.close()（关闭窗口的方法）重名了，导致你的函数没有被正确调用，这是报错的主要原因之一
• 点击事件里没有传递当前被点击的元素，所以你在函数里只能拿到所有span的集合，取第一个元素自然无法对应到点击的那个div

下面给你两种可行的解决方案：

方案一：传递当前元素到函数（简单直接） #

首先把函数名改成不会冲突的名字，比如closeDiv，然后在每个span的onclick里传递this（当前点击的span元素），这样函数就能精准找到对应的父div：

修改后的JavaScript代码 #

function closeDiv(currentSpan) {
  // 通过当前点击的span找到它的父级div，设置display为none隐藏
  currentSpan.parentElement.style.display = 'none';
}

修改后的HTML代码（每个span的onclick更新） #

<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"></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"></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"></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"></i>
  </span>
</div>

方案二：事件委托（更优雅，推荐） #

这种方式不需要给每个span都绑定onclick事件，只需要给一个父容器（或者document）绑定一次事件监听，通过事件冒泡来判断点击的元素是否是关闭图标，然后找到对应的div隐藏。这种写法更高效，也更符合现代JavaScript的开发习惯：

JavaScript代码 #

// 等DOM全部加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 给整个文档绑定点击事件
  document.addEventListener('click', function(e) {
    // 判断点击的是关闭图标（.fa-times），或者它的父级span（.span）
    const isCloseElement = e.target.classList.contains('fa-times') || e.target.closest('.span');
    if (isCloseElement) {
      // 找到最近的带有.div类的父元素
      const targetDiv = e.target.closest('.div');
      if (targetDiv) {
        targetDiv.style.display = 'none';
      }
    }
  });
});

对应的HTML代码（可以去掉所有onclick属性） #

<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"></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"></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"></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"></i>
  </span>
</div>

为什么你的原代码会报错？ #

除了函数名冲突的问题，你在函数里用document.getElementsByClassName('span')拿到的是所有span的HTMLCollection，然后直接取clost[0]，不管你点击哪个span，都会操作第一个span对应的div，完全无法对应到你点击的那个元素。加上函数名和内置方法重名，导致函数没有被正确执行，最终出现Cannot find parent of Undefined的错误。

内容的提问来源于stack exchange，提问作者gyanendra