How does the browser identify each list item so removeChild() deletes the correct item?

MDN
1

Greetings,

I hope this note finds you well.

I cannot ascertain how the browser identifies each list item so removeChild() deletes the correct item (see line 53 in the following MDN example, https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html) ? After viewing the browser console, I suspect it something to do with HTMLCollection, but cannot make the connection. Are the list items index hidden? Any assistance is greatly appreciated.

Thanks, have a great day.

2

Hello @ArthurDent

the secret on those line

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

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

listBtn will be certain button and listItem will be also certain one

you can say this button.onclick = function ... one each click it will create those element (constant) and for each button of those will add onclick which linked to certain item

let me know if i need to explain it in better way

hope that help and thanks alot and have a great day you too :slight_smile:

3

Thank you for responding @justsomeone, I appreciate it. I understand there is a ‘link’. However I’m trying to ascertain what that link is. In the MDN example, lets say three items are added to the list, we get the following HTML …

<ul>
     <li>
          <span>eggs</span>
          <button>Delete</button>
     </li>
     <li>
          <span>bacon</span>
          <button>Delete</button>
     </li>
     <li>
          <span>toast</span>
          <button>Delete</button>
     </li>
</ul>

To remove ‘bacon’, clicking the ‘Delete’ button executes ‘list.removeChild(listItem)’. If the parent, list ( <ul> ), has multiple children, listItem ( <li>), how does the browser know to remove ‘bacon’ and not ‘eggs’ or ‘toast’?

4

you very welcome

look how those list item created in the first place

let us take it step by step let us say we have only empty list and not item there

user will click on that button that create them button.onclick = function() {

this button would lead to creation of some stuff let us focus on those we are care about which are

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

then we do the append steps

now the trick come here when we add the onclick event to that new button

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

listBtn is just one of the created buttons but this event will be add to each one but each time we take about certain button cause each time the first button trigered would lead to the creation of the 3 stuff i mentioned earlier

now this line will do list.removeChild(listItem); will remove that listitem that we just created const listItem = document.createElement('li'); and of course any child of it

cause when it created it only see that listitem that we just created when we created also the button and the span

the scope of funtion make them see only them self that mean that button does not even know if there any other listitem or not it only know that listitem that created with it

same thing the listitem does not know any thing else but only it’s child span

you very welcome and thanks a lot and you too

5

My sincere apologies for not responding sooner. Thank you for taking the time to further clarify your explanation.

6

it’s ok do not be sorry and you very welcome :slight_smile: