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

【问题标题】：How to close the parent div on clicking the child element using JavaScript?如何在使用 JavaScript 单击子元素时关闭父 div？
【发布时间】：2019-08-30 13:00:51
【问题描述】：

我有四个具有相同类但不同 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>

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

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

【问题讨论】：

可以选择 jQuery 吗？
可以使用但想使用javascript。
“错误：找不到未定义的父级” – 你从哪里得到这个错误？您显示的代码，但进入 jsfiddle，在 Chrome 中没有显示任何此类错误。
你不应该在这里调用你的函数close - 这有可能与窗口对象的close 方法发生冲突。选择其他名称。
clost[0] 将始终是类 span 的第一个元素，因此这没有帮助。您可以简单地将当前元素作为参数传递给事件处理函数：onclick="myclose(this)", function myclose(element) { element.parentElement … }

标签： javascript

【解决方案1】：

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

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

（注意，我已经在每个span 中添加了Text 这个词，所以你实际上有一些东西可以点击）

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>

【讨论】：

JS 逻辑不应该如此紧密地依赖于 HTML 结构。将那个糟糕的按钮包装成一个装饰元素，然后看到你的程序惨遭失败。此外，为了分离关注点，内联 JS 应该被烧毁。

【解决方案2】：

function closeDiv(event) {
  event.target.parentElement.style.display = 'none';
}

span{
  background: red
}

<div class="div" id="div_1">
  <p>Please Enter a Keyword</p>
  <span class="span" onclick="closeDiv(event)" 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(event)" 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(event)" 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(event)" id="span_4">***
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

【讨论】：

【解决方案3】：

我可以提供一个更简单的解决方案吗？

所有用于关闭的 div 都是相同的，因此您可以使用委托事件。另一个优点是，如果稍后还添加动态内容，这些事件将适用于新元素。

一些注意事项，您可以在 DOM 树的任何位置附加委托事件。这里是一个简单的例子，我刚刚使用了body。但是如果说你有另一个容器，你的所有控件都在其中，你可以附加到那里，这样你的委托事件就不会在不需要时触发。

此外，如果您的事件需要停止在 DOM 中冒泡，您可以使用 evt.stopPropagation，甚至可以使用 evt.preventDefault 阻止 DOM 默认行为。

下面是一个简单的例子。

document.querySelector("body").addEventListener("click", 
 function (evt) {
  if (evt.target.classList.contains("fa-times")) {
    evt.target.closest("div").style.display = "none";
  }
 }
);

.fa {
  background-color: #e5e5e5;
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid silver;
  border-radius: 3px;
}

<div>
  <p>Please Enter a Keyword</p>
  <span>
<i class="fa fa-times" aria-hidden="true">❌</i></span>
</div>

<div>
  <p>Enter your name</p>
  <span>
<i class="fa fa-times" aria-hidden="true">❌</i></span>
</div>

<div>
  <p>Enter your city</p>
  <span>
<i class="fa fa-times" aria-hidden="true">❌</i></span>
</div>

<div>
  <p>Enter your country</p>
  <span>
<i class="fa fa-times" aria-hidden="true">❌</i></span>
</div>

【讨论】：

次要问题 - closest doesn't work on IE（尽管在 Edge 上确实如此）
@freefaller 我个人总是为 A 级浏览器编写代码，如果我需要对旧版浏览器的支持，那就是 polyfill 和转译。 MDN 甚至为此也有一个 polyfill -> developer.mozilla.org/en-US/docs/Web/API/Element/closest

【解决方案4】：

为什么不将父级的 id 作为参数传递给 close 函数？

<span class="span" onclick="close('div_1')" id="span_1">
<i class="fa fa-times" aria-hidden="true"></i></span>

还有 javascript：

function close (parentId) {
    var parent = document.getElementById(parentId);
    parent.style.display = 'none';
}

【讨论】：

简单且最佳的答案。我只是建议根本不要使用内联 JS。我们可以比 w3schools 的例子做得更好...

【解决方案5】：

您应该通过给函数一个参数来告诉您的关闭函数要关闭哪个 div。然后你可以定位这个元素：

Javascript

function close(divId) {
  var outerDiv = document.querySelector(`#{divId}`);
  outerDiv.style.display = 'none';
}

HTML

<div class="div" id="div_1">
  <p>Please Enter a Keyword</p>
  <span class="span" onclick="close(div_1)" 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(div_2)" 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(div_3)" 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(div_4)" id="span_4">
<i class="fa fa-times" aria-hidden="true"></i></span>
</div>

【讨论】：