Trying to create a delete button function that deletes specific item in array in javascript-CodePudding

I'm just learning javascript and I'm trying to build a To-Do-List app. Using the render function, I render the myList values to the screen after pushing the input values into the myList array.

My problem is creating a deleteButton function that deletes a specific item in the array. A delete button appears right next to entered values on the screen, and when the user clicks on it, that specific item in the array should be deleted. Any advice on how to solve this?

let myList = []

const submitBtn = document.getElementById("submit-btn");
const clearListBtn = document.getElementById("clearList-btn");
const inputEl = document.getElementById("input-btn");
const olEl =  document.getElementById("ol-el");
const doneBtn =  document.getElementById("done-btn");

function render(leads) {
    let listItems = " ";
    for ( let i = 0; i < leads.length; i  ) {
        listItems  =  
            `<li id = " ">
                ${leads[i]} <button id= "done-btn" onclick = "deleteButton(${leads[i]})">X</button>
            </li>
            `;
        }
    olEl.innerHTML = listItems;
}

submitBtn.addEventListener("click", function() {
    myList.push(inputEl.value);
    inputEl.value = " ";
    render(myList);
})

clearListBtn.addEventListener("click", function() {
    myList = [];
    render(myList)
})

function deleteButton(value) {
    myList.remove(value);
    render(myList);
}





<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div >
            <p>To-Do List</p>
            <input value = "Add an item!" id = "input-btn">
            <button id = "submit-btn">submit</button>
            <button id = "clearList-btn">clear list</button>
            <ol id="ol-el"></ol>
            <script src = "index.js"></script>
        </div>
    </body>

</html>

CodePudding user response：

  const deleteItem = (e: string) => {
    const arr = sortedData.filter((item: any) => item.id !== e);
    setSortedData(arr);
  };

CodePudding user response：

use Array.splice with the selected item's index, you won't need to pass in the whole item.

so the on click call would be:

onclick = "deleteButton(${i})"

and the function:

function deleteButton(index) {
    myList.splice(index, 1); // deletes one item starting from 'index'
    render(myList);
}

for more details on Array.splice - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

CodePudding user response：

This is how I would do it:

Loop through your array and get the index of the item you need to remove using the indexOf method.
Pass the index into the splice method thereby removing that element from the array

Like this:

    // Loop through your array 
    toDoList.forEach(item => {
    // Listen for a click on your button element
      button.addEventListener('click', () => {
         let index = toDoList.indexOf(item) // This tells you the position of the item you want to remove
         if (index > -1) { // Make sure the array is not empty
           toDoList.splice(index, 1); // This removes the item from the array
          }
        })
      }

Hope this was somehow helpful :)