Question

我有这种情况， 1-我要删除一个li，该li具有两个图标作为跨度：一个是选中或取消选中相应的li，另一个是删除那个li。 2-我也想通过单击图标（选中图标）来选中或取消选中该li，也要单击li。

我想通过将addEventListener放入ul来处理事件委托，但是我不知道如何执行代码。我没有任何JS代码，希望您能帮助我

谢谢

//delegation events 
//1-how to remove the li by clicking in icon with a class 'cross'?
//2-how to check or uncheck the li by clicking on the icon with a class 'check' and also by clicking in that li and showing or hiding the icon 'check'?

ul.addEventListener ('click',function())


//or by using the addEventListener in iconCross, how can I remove the li?
 // and by using the addEventListener in icon check, how can I check/uncheck the li by clicking on the icon and also on the li?

const iconCross = document.querySelectorAll('.cross')

iconCross.addEventListener('click',function())

li{

display:flex;
align-content:center;
justify-contnt:space-between;

}

<ul>
  <li>
    <span>
      <i class="check"></i>
      <i class="cross"></i>
    </span>
  </li>
</ul>

Answer 1

您可以使用remove()从DOM中删除一个元素。在这里，您的li有两个级别，必须使用parentElement获取参考，然后调用remove()

let withRemove = document.querySelectorAll('.with-remove .cross')

withRemove.forEach(e => {
  e.addEventListener('click', function(e) {
    this.parentElement.parentElement.remove();
  });
});

const withClass = document.querySelectorAll('.with-class .cross')

withClass.forEach(e => {
  e.addEventListener('click', function(e) {
    this.parentElement.parentElement.classList.add('hide');
  });
});

li {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.hide {
  display: none !important;
}

<ul class="with-remove">
  <li>
    <span>
      <i class="check">check1</i>
      <i class="cross">cross1</i>
    </span>
  </li>
  <li>
    <span>
      <i class="check">check2</i>
      <i class="cross">cross2</i>
    </span>
  </li>
</ul>

<ul class="with-class">
  <li>
    <span>
      <i class="check">check11</i>
      <i class="cross">cross11</i>
    </span>
  </li>
  <li>
    <span>
      <i class="check">check22</i>
      <i class="cross">cross22</i>
    </span>
  </li>
</ul>

Answer 2

//delegation events 
//1-how to remove the li by clicking in icon with a class 'cross'?
//2-how to check or uncheck the li by clicking on the icon with a class 'check' and also by clicking in that li and showing or hiding the icon 'check'?



//or by using the addEventListener in iconCross, how can I remove the li?
 // and by using the addEventListener in icon check, how can I check/uncheck the li by clicking on the icon and also on the li?
const iconCheck = document.getElementsByClassName('check')

iconCheck[0].addEventListener('click',function(){
  iconCheck[0].parentElement.parentElement.classList.toggle("check-li")
})

const iconCross = document.getElementsByClassName('cross')

iconCross[0].addEventListener('click',function(){
  iconCross[0].parentElement.parentElement.remove()
})

li{
display: flex;
align-content: center;
justify-content: space-between;
}

li.check-li{
  color: red;
}

<ul>
  <li class="check-li">
    <span>
      <i class="check">check</i>
      <i class="cross">cross</i>
    </span>
  </li>
</ul>

如何通过单击该li内跨度内的相应图标来删除<li>或选中/取消选中<li>？

2 个答案: