Question

我想在日期范围列表中创建一个动态的时间范围列表，并为每个生成的ul和li指定一个特定的类/ id。

这就是我走了多远。它给出一个错误，即newElement为null！我看到了一些有关生成行的答案，但是您不能给它们指定特定的类/ 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>

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

1 个答案: