为什么在Fetch api删除请求上出现此数据属性错误？

如何解决为什么在Fetch api删除请求上出现此数据属性错误？

我使用的是Express / MongoDB / EJS，我创建了一个用于获取api删除请求的函数，希望通过两个不同的按钮在整个应用程序中重复使用同一函数来获取删除请求，但这仅适用于第一次，当我稍后在代码中使用另一个按钮调用该函数时，它将引发此错误：

Uncaught TypeError: Cannot read property 'delete' of undefined
    at delItem (main.js:42)
    at HTMLElement.<anonymous> (main.js:135) 

'delete'是数据属性属性，im用于通过单击按钮从数据库中获取ID，我尝试使用其他属性名称，重新创建一个新函数，无论如何仍然会引发此错误。谁能解释我在做什么错？这是我第一次使用提取API，经过2周的尝试和研究，我要求您的帮助。我的代码如下：

EJS 

<ul id="list">
   <% for(let i = 0; i < list.length; i++) {%>
      <span class="saved-list-item">
          <li class="list-item">
              <div class="checkbox">
                 <span id="circleIcon"><i data-delete="<%= list[i]._id %>" class="far fa-circle uncheck"></i></span>
                     <span id="checkIcon"><i class="fas fa-check-circle check"></i></span>
                                   
              </div>
              <span class="editText"><%= list[i].item %></span>
              <div class="buttons">
                  <button type="submit" data-update="<%= list[i]._id %>" class="saveBtn"><i class="fas fa-edit"></i></button>
                  <button type="button" onclick="window.location.reload()"class="cancelBtn">X</button>
                  <button type="button" data-update="<%= list[i]._id %>" class="editBtn"><i class="fas fa-edit"></i></button>
                  <button type="button" data-delete="<%= list[i]._id %>" class="delItemBtn"><i class="fas fa-trash-alt"></i></button>   
               </div>                
          </li>  
       </span>
    <% } %>
</ul> 

获取功能（此代码始终在删除按钮上有效，此处没有问题）

const delItemBtn = document.querySelectorAll('.delItemBtn');

for(i = 0; i < delItemBtn.length; i++) {
    delItemBtn[i].addEventListener('click',delItem);
};

for(let u = 0; u < delItemBtn.length; u++) {
    delItemBtn[u].addEventListener('click',(e) => {
        e.preventDefault()
        localStorage.removeItem(localStorage.key(u)); // LOCAL STORAGE REMOVE ONE
    })
}

function delItem() {
    
    fetch('/list/' + this.dataset.delete,{
        method: 'delete',headers: { 'Content-Type': 'application/json' },})
    .then(res => {
        if (res.ok) {
            return res.status(200)
        } else {
            res.status(500)
        }
    })
    .then(window.location.reload())
    .catch(console.error)
};

在这里，我尝试调用delItem（）函数，以期通过click事件触发对另一个按钮的提取删除请求，但无法正常工作。

for(let i = 0; i < uncheck.length; i++) {
    uncheck[i].addEventListener('click',(e) => {       
        if(e.target.classList.contains('uncheck')) {           
            check[i].className = 'fas fa-check-circle check';
            check[i].style.display = 'block';
            uncheck[i].className = 'fas fa-check-circle check';
            li[i].style.textDecoration = 'line-through';
            editBtn[i].style.display = 'none';
            delItemBtn[i].style.display = 'none';
            

            // LOCAL STORAGE SAVE 
            savedChecks = document.querySelector('.saved-list-item').innerHTML;
            localStorage.setItem('checkedItems'+ new Date().getTime(),savedChecks);

        delItem() //Calling the delItem function,but throws the error.

        } 
    });
};

解决方法

我通过在for循环中添加一个单独的事件侦听器来解决此问题，如下所示：

for(let i = 0; i < uncheck.length; i++) {

    uncheck[i].addEventListener('click',delItem); //Edited code here

    uncheck[i].addEventListener('click',(e) => {       
        if(e.target.classList.contains('uncheck')) {           
            check[i].className = 'fas fa-check-circle check';
            check[i].style.display = 'block';
            uncheck[i].className = 'fas fa-check-circle check';
            li[i].style.textDecoration = 'line-through';
            editBtn[i].style.display = 'none';
            delItemBtn[i].style.display = 'none';
            

            // LOCAL STORAGE SAVE 
            savedChecks = document.querySelector('.saved-list-item').innerHTML;
            localStorage.setItem('checkedItems'+ new Date().getTime(),savedChecks);

        } 
    });
};

尽管它修复了未定义的属性，但我仍然很好奇为什么其他方法无法正确读取该属性。