时间戳

首页 > 解决方案 > 如何删除循环元素的父 div？

javascript - 如何删除循环元素的父 div？

问题描述

我试图删除一个文本的父 div，它为每个 flash 循环。我尝试通过 Id 获取元素，但它只删除了第一个闪烁的文本。这是代码：

{% for message in get_flashed_messages() %}
        <div class="todolistitems">
            <b id="todoitem">{{ message }}</b>
            <button onClick="testremove()" id="deletetodo"><i class="material-icons">done</i></button>
            
            <br>
        </div>
        <script>
            var msg = document.getElementById("todoitem")
            

              
            function testremove() {
                msg.parentNode.remove(); 
                               
            }
        </script>
        {% endfor %}

标签： javascripthtml

解决方案

这是一种处理方法。

首先，不要多次使用同一个 ID。但是，这里根本不需要使用它们。我们可以监听document一个点击事件，然后测试它是否是一个删除按钮。如果是这样，请删除与该按钮关联的元素。如何找到那个元素？最容易将它们组合在一个div容器中，然后使用方便的.closest(parentSelector)方法。当我们侦听删除点击时，我们需要考虑根据用户点击该按钮的位置，该按钮target将event是按钮还是其中的图标

window.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('click', e => {
    if (['material-icons', 'btn-delete'].some(c => e.target.classList.contains(c))) {
      let targ = e.target.closest('.todo-item')
      console.log(targ)
      targ.parentNode.removeChild(targ)
    }
  })
})
<div class="todolistitems">
  <div class='todo-item'>
    <b class='msg'>todo1</b>
    <button class='btn-delete'><i class="material-icons">done</i></button>
  </div>
  <div class='todo-item'>
    <b class='msg'>todo2</b>
    <button class='btn-delete'><i class="material-icons">done</i></button>
  </div>
  <div class='todo-item'>
    <b class='msg'>todo3</b>
    <button class='btn-delete'><i class="material-icons">done</i></button>
  </div>
</div>

推荐阅读