在嵌套循环 vanilla JS 中动态添加和删除元素

Question

I Want to create a dynamic list of time ranges within list of date ranges and give each generated ul and li a specific class/id.

This is how far I got. It gives an error that newElement is null! I saw some answers with generating rows, but you can't give them a specific class/ids.

I like it this way better since you have control over each ul and 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

You are creating multiple timeframes but you were selecting only one:

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

What you need to do is selecting specific timeframe each loop:

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>