Working with Express, MongoDB, and EJS, I crafted a function to handle fetch api delete requests. The goal was to reuse this function for multiple delete requests in the application triggered by different buttons. However, it only works the first time it's called. Subsequent calls with other buttons result in the following error:
Uncaught TypeError: Cannot read property 'delete' of undefined
at delItem (main.js:42)
at HTMLElement.<anonymous> (main.js:135)
The key 'delete' is used as the data attribute property to extract the ID from the database upon button clicks. Despite attempts to change the property name or create a new function, the same error persists. Could someone point out where I'm going wrong? This marks my initial experience with the fetch API, and after two weeks of trial and research, I seek assistance. Refer to my code below:
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>
Fetch function (working fine on the delete button)
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)
};
Trying to trigger the fetch delete request by calling the delItem() function through a different button click event, but encountering issues.
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() //Intended call for delItem function, causing an error.
}
});
};