如何在单击另一个元素时关闭一个元素

Hero 发表于 Dev

英雄

我希望每个元素在使用纯 javascript 单击“x”图标时关闭。我实际上是 javascript 新手，所以我正在尝试一些东西。以下是我的代码以及我能够做的事情。

我希望每个元素在单击“x”图标时关闭。

var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
  closeBtnTask[i].addEventListener("click", function() {
    var panel = document.querySelectorAll(".taskpanel");
    for (var x = 0; x < taskpanel.length; x++) {
      Things[x].style.display = "none";
    }
  });
}

.task-box {
  float: left;
  width: 100%;
}

.task-wrapper {
  width: 400px;
  background: #f5f5f5;
}

ul.mytask {
  padding: 0px;
  margin: 0px;
  padding-left: 5px;
}

ul.mytask li {
  list-style: none;
  line-height: 34px;
  border-bottom: 1px solid #ddd;
}

.mytask span {
  float: right;
  padding-right: 10px;
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="task-box">
  <div class="task-wrapper">
    <ul class="mytask">
      <li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li>
    </ul>
  </div>
</div>

普隆詹

你也可以用普通的 JS 委托

document.querySelector(".mytask").addEventListener("click",function(e) {
  let tgt = e.target;
  if (tgt.matches(".fa-close")) tgt.closest("li").style.display="none";
})

.task-box {
  float: left;
  width: 100%;
}

.task-wrapper {
  width: 400px;
  background: #f5f5f5;
}

ul.mytask {
  padding: 0px;
  margin: 0px;
  padding-left: 5px;
}

ul.mytask li {
  list-style: none;
  line-height: 34px;
  border-bottom: 1px solid #ddd;
}

.mytask span {
  float: right;
  padding-right: 10px;
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="task-box">
  <div class="task-wrapper">
    <ul class="mytask">
      <li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li>
      <li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li>
    </ul>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。