时间戳

首页 > 解决方案 > 在嵌套循环 vanilla JS 中动态添加和删除元素

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

问题描述

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

这就是我走多远。它给出了一个新元素为空的错误！我看到了一些生成行的答案，但你不能给他们一个特定的类/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>

标签： javascriptnested-loops

解决方案

您正在创建多个时间范围，但您只选择了一个：

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>

推荐阅读