Don't use appendChild for each list item.
Actually, don't do separate spans for each list item.
Instead, keep each item in a javascript array (forget about displaying it first, with the spans and everything, just have a single div for the entire list).
Then for each add/delete, just add/delete the item from the js array (after validating it).
THEN, after each add/delete, regenerate the entire list as a single string from the array (this will handle renumbering), count the characters in the newly generated string, and slap that into a div dedicated for the entire list.
That handles all the requirement in one go, and will not be overly complicated with many appendchilds/removechilds, just a single innerHTML assignment for everything.
