I am looking for anyone who can help me understand Js functions better.
And to help me with a project I am working on.
The project is a grocery list.
The person inputs an item and either press enter or clicks add to list button.
The button next to that is to clear the text field.
The other button is to clear the objects that the person just put in but does not delete the two original objects that are on the list since the beginning.
I want to only use pure genius and I don’t want to use arrays or a Jquery.
The only part I am focusing on is the remove all function. For what I want it to do is to take the The third to last items removed from the list but only keeping the two original items “bread and milk”
this is hard to to examine because it is impossible to add or reset items.
In your js code you refer to the id ‘inputItemList’ but in the html the input field’s id is called ‘newItemList’. If you change that, we can add items and clear the field and then we can concentrate on the ‘clear items’ button. I see that in the js code you use the class ‘newItems’ but the li elements have ‘orig-items’ as classname so the remove function won’t function.
document.getElementsByClassName(“newItems”) gives you an array like list of elements that contain that className
document.getElementsByClassName(“newItems”).className --> this returns undefined, I don’t know what you want to do with that, it can’t work
document.createElement() takes an element as argument : li, div, ul, p some tagname, it cannot take a classname
you can add the classname to the created element
li = document.createElement(‘li’)
li.classList.add(‘someclassName’)
But why are you creating elements and then removing them? You want to remove the elements that have been added to the html. To do that, you need to select them and then remove them.
element.removeChild(some childelement) is the correct method for that but do not add .className, it cannot work.
You say that you do not want to work with an array. Why is that? Which method do you prefer? An array seems like an very good method in this case, at least to me. The items that are added by the user do not contain the className ‘newItems’. I would go through each li and if doesn’t contain the class ‘newItems’ I would remove it.
ok great! ill give that a try. I had done some different way… it works, but the word would have to be put in the text field to get it removed… any chance this is a way to not have to retype the word in the text field and instead just delete it from the bottom of the list. I have updated my code pen.