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

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>