Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by David Kalina
David Kalina
13,325 Points

How would I be able to maintain the position of list items after editing their text content. [Code and Website supplied]

I'm working on a Todist task manager clone. While it's not exactly the same I'm trying to replicate some of the more practical features that it has. I have this feature where you can edit the contents of a todo that you've added. However, when I do this, it gets appended to the end of the list. I would like it to be modified and maintain its current position.

Here is a link to the project https://davidk1999.github.io/todoit-todoist-clone/

With the browser inspector all files and their contents should be visible

Also, if you have any suggestions regarding the structure of my code that would be greatly appreciated. I've done way too many tutorials and not enough practice. I want to work on clean and maintainable code.

Thank you.

1 Answer

Jamison Habermann
Jamison Habermann
11,691 Points

It would take a lot of work for me to rewrite your code so I will share some of my observations. It looks like that upon clicking the save button, what is happening is a brand new li is being created, which is why it is appending to the end. What you want to do is just change the text content of the li. I would take it a few steps further by changing your buttons to actual buttons (instead of spans) and wrapping the li text in a span. This way, you can just swap between a span and an input in the li instead of adding a whole new li.

David Kalina
David Kalina
13,325 Points

Hey man, thanks for the advice. That's actually a really good idea, much simpler and more efficient. I will definitely try implementing your suggestions!