Question

我想通过单击div最右端的每个关闭图标按钮来关闭该div。

这是我所做的a link

的链接

/* javascript to close new order list for specific order */
var closeNewOrderBtn = document.querySelectorAll(".specificOrder");
for (var x = 0; x < closeNewOrderBtn.length; x++) {
  //add event listener to close button
  closeNewOrderBtn[x].addEventListener("click", function(ev) {
    var specificOrderList = ev.target.closest(".individualOrder");
    specificOrderList.style.display = "none";
  });
}
/* end javascript to close new order list for specific order */

/* javascript to close new order for all oder at once */
var closeAllOrder = document.querySelectorAll(".closeOrder");
for (var i = 0; i < closeAllOrder.length; i++) {
  closeAllOrder[i].addEventListener("click", function() {
    var completeOrder = document.querySelectorAll(".closeAllOrder");
    for (var i = 0; i < completeOrder.length; i++) {
      completeOrder[i].style.display = "none";
    }
  });
}
/* javascript to close new order for all oder at once */

.new-order {
  float: left;
  width: 100%;
  position: relative;
}

.new-order-body {
  float: left;
  width: 100%;
  padding: 5px;
  position: relative;
  overflow-y: scroll;
  overflow-x: none;
}

.new-order-head {
  float: left;
}

.new-order-head a {
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
}

.new-order-brief {
  float: left;
  width: 100%;
  text-align: left;
  background: #fff;
  -webkit-box-shadow: 0px 10px 22px -2px #ddd;
  -moz-box-shadow: 0px 10px 22px -2px #ddd;
  box-shadow: 0px 10px 22px -2px #ddd;
}

.new-order-brief p {
  line-height: 24px;
  padding: 7px 0px 7px 7px;
  font-size: 14px;
}

.new-order-brief a {
  color: #f47c11;
  cursor: pointer;
  float: left;
  background: transparent;
  padding: 0px;
  margin: 0px;
  width: 100%;
  font-size: 14px;
}

span.close-new-order {
  position: absolute;
  top: -8px;
  right: -3px;
  font-size: 20px;
  color: #fb2b2b;
}

span.specific {
  color: #fb2b2b;
}

.add-extra {
  margin-bottom: 7px;
  float: left;
  width: 100%;
}

.add-extra a {
  text-decoration: underline;
}

.add-extra a:hover {
  background: none;
}

.new-order-wrap {
  float: left;
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}

<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="new-order-body">
  <div class="new-order-wrap">
    <div class="new-order-brief closeAllOrder">
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - 1 plate of rice + chiken - N750</p>
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - extra chiken - N300</p>
      <div class="add-extra">
        <p><a href="#"><span><i class="fa fa-plus"></i></span> Add extras</a></p>
      </div>
    </div>
    <span class="close-new-order closeOrder"><i class="fa fa-times-circle-o"></i></span>
  </div>
  <!-- end new-order-wrap -->
  <div class="new-order-wrap">
    <div class="new-order-brief closeAllOrder">
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - 1 plate of chiken + chips - N600</p>
      <div class="add-extra">
        <p><a href="#"><span><i class="fa fa-plus"></i></span> Add extras</a></p>
      </div>
    </div>
    <span class="close-new-order"><i class="fa fa-times-circle-o closeOrder"></i></span>
  </div>
  <!-- new-order-wrap -->
  <div class="new-order-wrap">
    <div class="new-order-brief closeAllOrder">
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - 1 plate of rice + chiken - N750</p>
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - extra chiken - N300</p>
      <div class="add-extra">
        <p><a href="#"><span><i class="fa fa-plus"></i></span> Add extras</a></p>
      </div>
    </div>
    <span class="close-new-order"><i class="fa fa-times-circle-o closeOrder"></i></span>
  </div>
  <!-- end new-order-wrap -->
  <div class="new-order-wrap">
    <div class="new-order-brief closeAllOrder">
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - 1 plate of rice + chiken - N750</p>
      <p class="individualOrder"><span class="specific"><i class="fa fa-times-circle-o specificOrder"></i></span> - extra chiken - N300</p>
      <div class="add-extra">
        <p><a href="#"><span><i class="fa fa-plus"></i></span> Add extras</a></p>
      </div>
    </div>
    <span class="close-new-order"><i class="fa fa-times-circle-o closeOrder"></i></span>
  </div>
  <!-- end new-order-wrap -->

</div>
<!-- end new order body -->

我希望每个div在单击每个div右上角的关闭图标按钮时关闭。根据我现在所做的操作，当您单击一个div时，整个div都会关闭，仅留下按钮。

Answer 1

在此行

var completeOrder = document.querySelectorAll(".closeAllOrder");

您正在查询所有closeAllOrder类。

您应该查询具有此类的最近的元素。

Answer 2

这是工作解决方案的更新链接：https://jsfiddle.net/zc7r65pu/

关键是要使用this在关闭按钮的点击处理程序中找到父div：

    var closeAllOrder = document.querySelectorAll(".closeOrder");
    for (var i = 0; i < closeAllOrder.length; i++) {
        closeAllOrder[i].addEventListener("click", function() { 
           this.parentNode.parentNode.style.display = "none"
        });
    }

我还建议事件委托处理多个单击处理程序。

Answer 3

我用父元素更新了query selector，现在在更新后的fiddle

下可以正常工作了

    closeAllOrder[i].addEventListener("click", function() {
        var completeOrder = event.target.parentElement.parentElement;
            completeOrder.style.display = "none";
    });

Answer 4

要关闭整个订单，您也可以使用相同的方法关闭整个订单中的单个订单

/* javascript to close new order for all oder at once */
var closeAllOrder = document.querySelectorAll(".closeOrder");
for (var i = 0; i < closeAllOrder.length; i++) {
    closeAllOrder[i].addEventListener("click", function(ev) {
        var completeOrder = ev.target.closest('div');
        //for (var i = 0; i < completeOrder.length; i++) {
            completeOrder.style.display = "none";
        //}
    });
}

/ * javascript一次关闭所有订单的新订单* /

如何使用JavaScript一次关闭同一类的一个元素

4 个答案: