通过单击图标隐藏第一个父级

Question

单击删除图标如何删除第一个父级？我的意思是带有类框的 div。我尝试了一切，但我还没有找到解决方案

var deleteIcon = document.querySelectorAll('.delete-icon');

var box = document.querySelectorAll('.box');

deleteIcon.forEach(function(icon) {

        icon.addEventListener("click", function() {

            box.style.display = "none";

            // icon.style.display = "none";            

        });

    });

.box {

  width: 150px;

  height: 200px;

  background-color: #ccc;

  display: inline-block;

  margin: 10px;

  position: relative;

}

.delete-icon {

  position: absolute;

  bottom: 10px;

  right: 10px;

  cursor: pointer;

}

<link href"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">

<div class="box">

   <ul class="nothing">

     <li class="blabla">1</li>

     <li class="blabla">2</li>

     <li class="blabla">3</li>

     <li class="blabla">4</li>

     <span>bla bla</span>

  </ul>

  <div>nothing1</div>

  <div>nothing2</div>

  <div>nothing3</div>

  

  

  <div class="icon-test">

    <i class="fas fa-times-circle delete-icon"></i>

  </div>

</div>

<div class="box">

   <ul class="nothing">

     <li class="blabla">1</li>

     <li class="blabla">2</li>

     <li class="blabla">3</li>

     <li class="blabla">4</li>

     <span>bla bla</span>

  </ul>

  <div>nothing1</div>

  <div>nothing2</div>

  <div>nothing3</div>

  

  

  <div class="icon-test">

    <i class="fas fa-times-circle delete-icon"></i>

  </div>

</div>

<div class="box">

   <ul class="nothing">

     <li class="blabla">1</li>

     <li class="blabla">2</li>

     <li class="blabla">3</li>

     <li class="blabla">4</li>

     <span>bla bla</span>

  </ul>

  <div>nothing1</div>

  <div>nothing2</div>

  <div>nothing3</div>

  

  

  <div class="icon-test">

    <i class="fas fa-times-circle delete-icon"></i>

  </div>

</div>