Make Delete and Edit Buttons Work

Please help me to finish my To Do App:
Add click event on button “Remove” - So that by click on button “REMOVE” created item would be removed from localstorage as well.
Add click event on button “Edit” - So that created item could be edited in localstorage as well.
Thank you a lot for your time and effort.

<button onclick="deleteFunction()">REMOVE</button>
I want this button on click to delete element from localstorage and from page

CLICK HERE TO SEE MY CODE

these seems like user stories from an assignment.

What have you tried to do to add these functionalities?

I tried to do like this:
onclick=“parent.remove()”
But it doesn’t delete it from localstorage

what’s remove? that doesn’t seem something from the local storage API

Did you check my code?
If yes then could you help me to make delete or edit button work after you add To do item?

Yes, I can help you, I can’t do it for you

you need to add a click event on the button remove, I don’t see anything that could do that

you said you tried to do this. So I ask you, what is parent, what is remove?

I dont know how to do it. Its not an assignment its just my pet project for myself. I started to learn js 2 month ago and its really tough for me. I was thinking that in this forum someone could help me by showing how i can make them buttons work.

well, this was a good idea, but instead of parent.remove() you need a function you created that delete the element from the html + delete the record from local storage, you never wrote it, so parent.remove() is not something you can use

Yes, exactly. Thats where I stuck

do you know how to create a function and give it to onclick as argument?

button.addEventListener(‘click’, function () {}

I already spend 2 days to get them buttons work :confused:

not with addEventListener, with onclick

Okay, thank you a lot for nothing.
I am not angry I am just shocked. I wanted a help and I guess it is a wrong place.

Well, this is not a place where people will code stuff for you
If you don’t want to code this yourself, with hints and nudges and pushes in the right direction, but want someone else to give you the finished code, this forum is the wrong place

If I would see finished code I could understand the logic as I really cannot make it myself.

even if i put onlick event how to and where i should write localstorage and all sequence of the rest of the code

First af all, you can add an onclick attribute to your delete button when you are creating it

in this way you can trigger a function that does all those things

can you describe exactly what you want that function to do?

I would suggest you add a random id to each todo object and add the same id to the li container.

  1. Add an id to the object. Add the same id to the parent element in the template.

  2. Create a function and attach it as a listener on the document (use delegation).

  3. Inside the function check the click target class for remove and put all the code inside this condition.

  4. Get the id from the parentElement of the click target.

  5. filter the todoList and remove the object where todo.id !== parentElementId (make sure the data type of the ids match depending on how you generate the random id for the object)

  6. Set the new localStorage (just overwrite it) and call displayMessages