динамическое добавление и удаление элементов во вложенных циклах vanilla JS - PullRequest
Новая
       1

динамическое добавление и удаление элементов во вложенных циклах vanilla JS

0 голосов
/ 20 февраля 2020

Я хочу создать динамический c список временных диапазонов в списке диапазонов дат и дать каждому сгенерированному ul и li определенный c class / id.

Это то, как далеко я дошел. Выдает ошибку, что newElement имеет значение null! Я видел некоторые ответы с генерацией строк, но вы не можете дать им конкретный c class / ids.

Мне нравится этот способ лучше, так как у вас есть контроль над каждым 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>

1 Ответ

0 голосов
/ 20 февраля 2020

Вы создаете несколько таймфреймов, но выбираете только один:

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

Вам нужно выбрать c таймфрейм каждый l oop:

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>
...