Make Delete and Edit Buttons Work

[dimer16]

I updated my code. Now I am able to delete element, but not from localstorage and I add random id.
Thats all what i can. Other ways i just dont understand.

[dimer16]

I want to finish it, but i guess my knowledge is not enough.

[lasjorg]

You have to use item.id on the li.

Do not directly remove elements from the DOM. Remove the object from the array and then update the DOM using that new array. That is, re-render using displayMessages after you have filtered the object out of the array.

You will use the parent element id (the li) and the object id to filter out the object.

You also need to move todo.innerHTML = displayMessage out of the forEach and put it after it, otherwise, the last todo will not be removed when re-mapping over the empty array.

function removeTodo({ target }) {
  // click target
  const clickTarget = target;
  
  // does the click target contain the "remove" class, use .contains()
  const clickTargetClasses = clickTarget.classList;
  
  // only run the rest of the code if the target is the remove button
  
  // get the id of the click target parent li
  const clickTargetParentId = clickTarget.parentElement.id;
  
  // filter the todoList and remove the object
  // use clickTargetParentId and the object id to filter out the object
  todoList = todoList.filter((todo) => {
    // filter code
  });
  
  // update localStorage with the new todoList array
  
  // call displayMessages to re-render
}

document.addEventListener("click", removeTodo);

---

Edit: Editing a todo is more involved and how you do it will depend on how you let the user edit it. Some use an edit mode you can enter, some use a modal for it, and some use content editable on the todo element. Each version requires different code.

[dimer16]

Hard to understand what is going on ;/

[lasjorg]

If you need help you are going to have to ask some questions. What specifically do you not understand? The function I posted is almost complete, if I posted any more code I would be giving it away completely.

Let me start by asking, can you filter out an object using an id?

const users = [
  { id: 1, name: 'John', age: 34 },
  { id: 2, name: 'Amy', age: 20 },
  { id: 3, name: 'Jack', age: 40 },
];
// id of user Amy
const idForRemoval = 2;
// remove the Amy user object
const newUsers = users.filter(user => ???);

[dimer16]

I already done it myself. Is there any ways to realize Edit button functionality?

[ilenia]

lasjorg’s suggestion would make it possible to implement the delete and edit buttons pretty easily