Questions about button.onclick and the DOM

Hey there,

I worked through the Manipulating documents lesson regarding the DOM, and it raised some questions (I was sent to this lesson before doing Test your skills: Loops).

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.

Hello @Paintblob

button.onclick call the function as in the code in the link you provide so for each click on that button it create

const listItem = document.createElement('li');
        const listText = document.createElement('span');
        const listBtn = document.createElement('button');

and then attach event to

 listBtn.onclick = function(e) {
          list.removeChild(listItem);
        }

so this listItem is the one that this function created

each time you click on button.onclick it create all that despite you see it the same name but it’s not the same object

e is event it self sometime you would need it in case you read certain value from the the target that start that event

in our case we did not use it so it ignored

not sure this what you need or what Element: click event - Web APIs | MDN

did you follow the lesson as it suggested and if that did not help then let me ask @mikoMK if he has another resource for that

do not be sorry to ask as much as you like and we will try to answer as much as we know :wink:

hope that help and have a nice day both of you :slight_smile:

1 Like

Thanks @justsomeone :slight_smile:

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.

just to make sure we are in the same page

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

not sure if that would help or not

and you welcome

1 Like

@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 :slight_smile:

1 Like

@Paintblob you very welcome and feel free to ask anything anytime
that how we learn from each other in this community :slight_smile:

1 Like