TODO-List Delete List in order number

JavaScript
1

Hello everyone,

Im making a todo-list with vanilla js, the only problem i have its that when i delete a list item, the number order its not doing it consequential… meaning

  1. Walk the Dog.
  2. Practice JS
  3. Clean Dishes.
    if i delete an item called 2. Practice JS will delete but the 3. Clean Dishes, will still be 3 instead of 2, can someone help me resolve the issue maybe im missing something.

Thanks!
Code Pen bellow:

1 Like
3

@camperextraordinaire hi there, so what would i do to solved ?. how would i approach it ?. So what i understood was that i have assign a value static meaning wont change. so what would i need to do to make something more dynamically.
Thanks.

4

Why not let CSS do the numbering for you?

Add this in the ul css:

/* displays a number marker like '1 .' 
   before the content of each li */
list-style-type: decimal;
/* places the marker inside the li;
   this will make the border and other properties
   of the li apply to the marker too
*/
list-style-position: inside;

Remove this from the li css:

list-style-type: none;

Then you don’t need the JS to add the number.

If you don’t want a dot after the number, then you can use this instead:

Add this to the ul css:

/* creates / resets a counter named 'number' */
counter-reset: number;

Add this to the css:

/* the 'before' pseudo element places content before
   the content of the list item*/
li::before {
/* increases counter named 'number' by 1*/
    counter-increment: number;
/* places the counter 'number' in the 'before' pseudo
   element's content. Then add a space after it.*/
    content: counter(number)" ";
}
1 Like
6

Hi there @ShaCP Looking at your code and working on it, i find it very easy to implement and to work with CSS, something i did not know it can be done as well, Something new, i have implemented in my working code and works, perfectly, thank you so much, for helping me and now i understand better, thanks for the feedback and time. IT works perfectly… This is good to know because you can learn from other ways to make the problem or solution to work.
Thank you so much.

7

Hi @camperextraordinaire I happy to work on this solution you give me with Pure vanilla JS i will look into it and work my way to find it. I might have some questions regarding but i will follow what you just told me so i can work on it. Its always an honor to follow your guidelines.