Reputation: 11
I am coding a to-do list, and I want to delete the items added to the list from the screen and from the local storage. Here is the JS code:
function delete_btn() {
let all_buttons = document.querySelectorAll(".remove_item");
all_buttons.forEach((db, i) => {
db.addEventListener('click', () => {
del(i);
})
function del(i) {
input_array.splice(i, 1);
localStorage.setItem("items", JSON.stringify(input_array));
console.log(localStorage);
location.reload();
}}
)}
My first question: the items get deleted only on the second click and I cannot figure out what triggers the double click and how to change it to a single click?
My second question: in my code, the to-do list is located on the second section which is hidden when the page loads (I use "next" and "back" button to switch between the sections). When I run the above code to delete a to-do entry, the page gets reloaded to update the to-do list on the screen and goes back to the first section after the reload. How can I update the to-do list without reloading the page OR how can I reload the page to update the to-do list and stay on the second section (to-do section)? Thank you!
I found this solution Refresh Part of Page (div) for the reload using JQuery but I wonder if there is a plain JS solution?
Upvotes: 0
Views: 76