Hey guys i need help, i’m building a to-do list and i’m having problems at the moment that u want to add a new task after the first one. If u have time to check please give me some help there.
Thanks
https://codepen.io/syonrod/pen/BwYgLr
The first problem is that you only create the text nodes “-” and “o” once. When we add a new item, those text nodes are set as children of the new buttons with the lines remove.appendChild(removeItem); and complete.appendChild(completeItem);. Since they can’t simultaneously be children of the other buttons, the previous list items lose their text. Or at least that’s how I understand it, I’m not 100% sure of my explanation. In any case you can see the effect if you look at the actual HTML on the page with the developer tools (you have to dig a little bit in CodePen’s HTML to get to the right point).
You will need to create the text nodes for each item in the list. Now when you do that, the styling still looks wrong. I haven’t looked very deep but it might have to do with the styling only being applied to the ::last-of-type pseudo-element.