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

时间：2019-05-26 18:40:12

标签： javascript html css

在单击删除图标时，如何删除第一个父母？我的意思是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>

<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>

2 个答案:

答案 0 :(得分：3)

box.style.display = "none";不起作用的原因是因为您将box定义为.querySelectorAll()调用的返回值。 .querySelectorAll()返回一个没有.style属性的节点列表。您必须设置单个元素的样式，而不是元素的集合。

相反，只需使用.closest()方法找到正确的元素，然后向其应用预制的CSS类。

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

deleteIcon.forEach(function(icon) {
        icon.addEventListener("click", function() {
            // Find the nearest ancestor that matches the selector
            // and add the hidden class to it.
            this.closest("div.box").classList.add("hidden");      
        });
    });
.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;
}

.hidden { display:none; }
<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">Box 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">Box 2</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">Box 3</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">Box 4</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">Box 5</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">Box 6</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>

答案 1 :(得分：1)

您可以通过element对象的parentElement属性选择父元素。

要删除，请使用“删除”或removeChild方法。

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

deleteIcon.forEach(function(icon) {
  icon.addEventListener("click", function() {
    let parent = this.parentElement.parentElement;
    parent.parentElement.removeChild(parent);
  });
});
.box {
  width: 150px;
  height: 200px;
  background-color: #ccc;
  display: inline-block;
  position: relative;
  margin: 5px;
}

.icon-test {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  background-color: #f99;
  border-radius: 50%;
}

.delete-icon {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
}

.delete-icon::before {
  content: '\00D7';
  font-weight: bold;
  color: white;
  font-size: 2em;
}
<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>box 1</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>box 2</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>box 3</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>box 4</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>box 5</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>box 6</div>


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

相关问题
最新问题