在嵌套循環 vanilla JS 中動態添加和刪除元素

Question

我想在日期范圍列表中創建一個動態的時間范圍列表，並為每個生成的 ul 和 li 指定一個特定的類/ID。

這是我走了多遠。 它給出了 newElement 為空的錯誤！ 我看到了一些生成行的答案，但你不能給他們一個特定的類/ID。

我更喜歡這種方式，因為您可以控制每個 ul 和 li。

 var list = document.getElementById('date'); var add = document.getElementById('add'); //adding a new element to the list addDate.addEventListener('click', function(){ var newElement = document.createElement('LI'); list.appendChild(newElement); var i; for (i=1;i<10; i++){ newElement.innerHTML = "NEW Date Frame<span class='btn'>X</span><ul id='timeframe-"+[i]+"'></ul><button id='addTime'>Add a Time Frame</button>"; var addTime= document.getElementById('addTime'); var timeframe = document.getElementById('timeframe'); addTime.addEventListener('click', function(){ var newElement = document.createElement('LI'); timeframe.appendChild(newElement); newElement.innerHTML= "NEW Time Frame<button class='btn'>X</button>"; }); } }); //removing list.addEventListener('click', function(e){ if(e.target && e.target.nodeName == "SPAN") { // List item found! Output the ID! e.target.parentNode.remove(); } });

 ul span { cursor: pointer; color: blue; margin: 5px; }

 <div> <ul id="date"> <li class="element">Date Frame</li> </ul> <button id="addDate">Add a Date Frame</button> </div>

Answer 1

您正在創建多個時間范圍，但您只選擇了一個：

var timeframe = document.getElementById('timeframe');

您需要做的是選擇每個循環的特定時間范圍：

var timeframe = document.getElementById('timeframe-' +[i]);

 var list = document.getElementById('date'); var add = document.getElementById('add'); //adding a new element to the list addDate.addEventListener('click', function(){ var newElement = document.createElement('LI'); list.appendChild(newElement); var i; for (i=1;i<10; i++){ newElement.innerHTML= "NEW Date Frame<span class='btn'>X</span><ul id='timeframe-"+[i]+"'></ul><button id='addTime'>Add a Time Frame</button>"; var addTime= document.getElementById('addTime'); var timeframe = document.getElementById('timeframe-' +[i]); addTime.addEventListener('click', function(){ var newElement = document.createElement('LI'); timeframe.appendChild(newElement); newElement.innerHTML= "NEW Time Frame<button class='btn'>X</button>"; }); } }); //removing list.addEventListener('click', function(e){ if(e.target && e.target.nodeName == "SPAN") { // List item found! Output the ID! e.target.parentNode.remove(); } });

 ul span { cursor: pointer; cursor: pointer; color: blue; margin: 5px; }

 <div> <ul id="date"> <li class="element">Date Frame</li> </ul> <button id="addDate">Add a Date Frame</button> </div>