TODO-List Delete List in order number

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.

Code Pen bellow:

1 Like

@imendieta You set the number value in this code:

container.innerHTML = container.innerHTML + '<li class="items"><span id="number">'+orderNumber+'</span>'+itemsValue+' ' +
    '<a href="#" class="delete">' +
      '<i class="fas fa-trash-alt"></i>' +
    '</a>' +

This number never gets changed again from what I can see. That is why it stays the same value as what you originally assign it.

@RandellDawson 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.

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

There are a couple of different approaches here. One approach is to separate the data (the tasks) from the DOM. If you store the tasks in an array, then you would just perform the addition and deletion of tasks with respect to the array. You would also need a function that just iterates through the array and build an HTML string that you will replace the innerHTML of the element with id=“list-itemsc” after you add or delete tasks.

1 Like

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.

Hi @RandellDawson 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.