浏览器如何知道要删除哪一个？

Question

 var b=0 const btn = document.getElementById(`add`); btn.addEventListener(`click`, function(){ b++; console.log(b) for (let i = b; i <= b; i++) { var num = i.toString(); var yazi = document.getElementById("yazi").value; const li = document.createElement("li"); li.className = `todos${num}`; li.innerHTML = `<div id= "yazii">${yazi}</div><div id="sil"><button class="x" id="x${num}">X</button> </div>`; document.getElementById("todo").appendChild(li); console.log(yazi); const sil = document.getElementById(`x${num}`); console.log(sil); sil.addEventListener(`click`, function(){ console.log(sil); sil.parentElement.parentElement.remove(); }) } });

 <div class="container"> <div class="todoheader">To-Do List <div id="sag"><input type="text" id="yazi"><button id="add">Add</button></div></div> <div class="todocontainer"> <ul id="todo"> </ul> </div> </div>

Im learning beginner javascript as a hobby. Tried to create a simple to-do list. It worked but after i reviewed the code, i cant understand why and how it worked. I declared "sil" as const and give it a value in every loop again and again.

1-In udemy course instrıctor pointed that const values cant be changed, so how could it worked?

2- "sil.addEventListener" -> How this listeners function deleted the correct list element?

Answer 1

I declared "sil" as const and give it a value in every loop again and again.

In udemy course instrıctor pointed that const values cant be changed, so how could it worked?

Every iteration of the loop creates a new environment so every iteration basically has its own sil variable. You are never assigning a new value to an existing sil variable (which would not work as already mentioned).

"sil.addEventListener" -> How this listeners function deleted the correct list element?

For the same reason: Every iteration has its own sil variable. In each iteration a new event handler is created which has access to that variable. The variable holds a reference to the element processed in that iteration of the loop.