Na filmie przedstawiłem z czym jest problem
https://www.youtube.com/watch?v=01-EhMofi3k&feature=youtu.be
Chce aby kazdy przycisk odpowiadal za swojego diva, a w tej chwili działa tylko jeden, ten pierwszy, tak jak widać na filmie.
KOD:
<div class="container">
<h1>List To Do</h1>
<form>
<input id="input" type="text" placeholder="Napisz coś" required>
<input type="submit" value="Add" id="add">
</form>
<div class="list" id="list">
<div class="list-item">
<p>Dziś wieczorem, zrobić zakupy.</p><button id="delete">DELETE</button>
</div>
</div>
</div>
window.onload = function()
{
var add = document.getElementById('add');
var input = document.getElementById('input');
var list = document.getElementById('list');
var deleteItem = document.getElementById('delete');
add.addEventListener('click', function(e)
{
var textContent = input.value;
e.preventDefault();
if(input.value == '')
{
alert('Wpisz coś!');
}
else
{
var item = document.createElement('div');
item.setAttribute('class', 'list-item');
item.innerHTML = "<p>" + textContent + "</p>"
+ "<button id='delete'>" + "DELETE" + "</button>";
list.appendChild(item);
}
});
deleteItem.addEventListener('click', function(e)
{
e.preventDefault();
this.parentNode.remove();
});
};