I am building a to-do list app to learn Javascript and have hit a stumbling block as a beginner. My HTML is as follows - and splits the to-do list into 3 sections the user can move tasks between. I am however struggling with the delete function.
When I add items to the array (e.g. [1, 2, 3, 4]) and a user clicks the delete button against item 3, the 1st item in the array is removed so the array will be left as [2, 3, 4].
I know this has something to do with the index of the item in the array, but I cannot work out what I need to modify to change my code for it to work. Any help?
HTML
<div id="TopArea">
<input id="taskInput", type="text", onkeyup="noTask()" placeholder="Add a task...">
<button id="taskButton" onclick="addNewTask()">Add task</button>
<div class="ttlSelectors"id="ttlButtons">
<button class="todayDefault" id="todayButton">Today</button>
<button class="tomoDefault" id="tomorrowButton">Tomorrow</button>
<button class="laterDefault" id="laterButton">Later</button>
</div>
</div>
<div class="todaySection">
<h2>Today</h2>
<ul id="todayList">
</ul>
</div>
</body>
JS to create items from localstorage
function getToday(){
//Check if local storage is empty, if not then return
if (localStorage.getItem("todayArray")==null) return;
let savedToday = JSON.parse(localStorage.getItem("todayArray"));
var counter = 0;
savedToday.forEach(myTask => {
savedTodayLi = document.createElement('li');
savedTodayDelete = document.createElement("button");
savedTodayDelete.innerHTML = "🗑";
savedTodayDelete.addEventListener("click", deletingMe);
savedTodayLi.setAttribute("type", "input");
savedTodayLi.id = "savedTodayLi" + (++counter);
savedTodayText = document.createTextNode(myTask);
savedTodayLi.appendChild(savedTodayText);
savedTodayLi.appendChild(savedTodayDelete);
document.getElementById("todayList").appendChild(savedTodayLi);
});
}
Delete function
function deletingMe() {
let savedToday = (JSON.parse(localStorage.getItem("todayArray")));
todayIndex = savedToday.findIndex(myTask.value);
savedToday.splice(todayIndex, 1);
console.log(savedToday);
localStorage.setItem("todayArray", JSON.stringify(savedToday));
//event.parentNode.remove();
}