I have some questions regarding the solution, which was comparable to my own solution:
After attaching the onclick event handler to listBtn, that function is called whenever the delete button is clicked. When executing list.removeChild(listItem), how does JS know which list item to remove?
Could the e parameter in the given solution be a typo?
Where does the onclick event handler come from? I expected to find it on the HTMLButtonElement page, or else the HTMLElement or Element pages, from which HTMLButtonElement seems to inherit, but no such luck.
I don’t feel confident yet about my overview of the whole DOM structure and how it all relates to each other (Document, Node, HTMLElement, Element, EventTarget etc.). If anyone has a clear visual diagram of this that would be much appreciated.
I’m sorry for this amount of questions - I’m having trouble just continuing on without a real understanding.
Thanks!
Edit: maybe I don’t need a thorough understanding of this yet at this point, I’m not sure; it always bugs me not to fully get it though.
So each time the submit button is clicked, a <li> is created, with a <span> and a <button> with an event handler nested in it. Then this list item is added to the <ul> on the page. After adding multiple items to the list, could I visualize it like this?
list
listItem1
span
deleteButton
listItem2
span
deleteButton
listItem3
span
deleteButton
So when the deleteButton nested inside listItem1 is clicked, list.removeChild(listItem) removes listItem1 because this particular deleteButton is a child of listItem1 - is that correct?
About the onclick and DOM structure questions: I did find that page about onclick, it’s just that I’m having a hard time building a mental model of how it all fits together. For example, on the HTMLButtonElement page, there’s this kind of inheritance chain: EventTarget <= Node <= Element <= HTMLElement <= HTMLButtonElement. I’m not sure how this chain relates to the tree structure of the DOM, or to the Document and Window objects, etc.
here are the code with some comments
when you click on the add button
const listItem = document.createElement('li'); // this create new listitem
const listText = document.createElement('span'); /this will create new pan
const listBtn = document.createElement('button'); this will create new button
listItem.appendChild(listText); // this will appened that just created span to that just created list item
listText.textContent = myItem; // this set the textcontent to that just created span to this value
listItem.appendChild(listBtn); // this will appened this new created button to that list item
listBtn.textContent = 'Delete';
list.appendChild(listItem); // finaly append the listitem to the list we have
listBtn.addEventListener('click', () => {
list.removeChild(listItem);
}); // this will add event listener to that new button and will remove that just created list item from the list
each time you click the button it do the same that how browser know which object linked with what
in general when you create object the browser create it and give it’s reference to the variable name you want
so each time you call the function it create those object and you name it what ever you like like listitem and listBtn and so on you use those names to do what ever you like but in the browser deal with the real object those variable hold
that how it defrenciate between first list item and second one and so on
@justsomeone thank you so much for your time! It seems to me like we’re on the same page. The links you posted seem very helpful to clarify some things too. Thanks again, and have a great day