How do I pass a specific item in an index to a delete function in Javascript for a todo list app?

170 Views Asked by At

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 = "&#128465";
        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();
    }
0

There are 0 best solutions below