My solution for the "button up and down remove challenge " ?
I solved the challenge regarding to the button problem (e.g.: when the last child has a down button). Maybe my solution is too complicated, so if you have a shorter or more effective version and you could share it, it would be nice. Here is mine:
The program works smoothly (you can add, delete/remove buttons and it's also responsive because when you have only 1 item left it shows only the remove button or if you have only 2 items left it shows only up for the list item and only down for the first),
BUT I don't understand these 2 variables:
const firstListitem = ulFater.firstElementChild; const lastListitem = ulFater.lastElementChild;
After you run the program and remove some items/ add some items and call this variable in the console, you will see that the firstElementChild variable has remained "Grapes", however, if you type "ulFater" or "lis" variable in the console, you can say that these variables show the actual/current list.
Why is this? ulFater is correct but firstListitem variable is not updated? Could you please help?
Steven Parker163,768 Points
I assume your "ulFater" contains an HTMLCollection, and those are "live" which means they get updated when any changes are made in the DOM.
But when you take the value of one of their properties and put it into another variable (like "firstListitem") that value remains what it was at the moment of the assignment until/unless it is assigned again.
But ulFater comes from a simple querySelector:
const ulFater = document.querySelector('ul');