when I dynamically create a li and add a delete button to it the delete button deletes all elments in the ul. Also, I am unable to create another element in the ul after the delete button is clicked. I am unsure how to fix this. Any help is appreciated!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Todo List</title>
</head>
<body>
<div id="form">
<h1>Todo List</h1>
<input id="todo-input"><button id="add-itemBtn">Add Task</button>
<ul id="todoContainer">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
------------------------------------------------------------
var todo = document.getElementById('todo-input');
addToDo();
// get todo from input & display to
function addToDo(){
//var todo = document.getElementById('todo-input');
document.getElementById('add-itemBtn').addEventListener('click', function(){
var tag = document.createElement("li");
var text = document.createTextNode(todo.value); // store todo
tag.appendChild(text); // append todo to end
var element = document.getElementById("todoContainer"); //get container you want to store todo in
element.appendChild(tag); // append to element
//style the todo List
listStyle(tag);
var button = document.createElement("button");
button.textContent = 'delete';
button.className = 'newBtn';
//var text = document.createTextNode('delete'); // store todo
//tag.appendChild(text); // append todo to end
var elementBtn = document.getElementById("todoContainer"); //get container you want to store todo in
elementBtn.appendChild(button); // append to element
btnStyle(button);
// elementBtn.onclick = function() {
// this.remove();
//};
elementBtn.addEventListener('click', deleteToDo(elementBtn));
}
)
}
function deleteToDo(elementBtn) {
elementBtn.onclick = function() {
this.remove();
};
/*
var target = e.target;
while(target.tagName !== 'UL') {
if(target.tagName === 'LI') {
return target.parentNode.removeChild(target);
}
target = target.parentNode;
}
*/
}
function listStyle(tag){
tag.style.backgroundColor = 'steelblue';
//tag.style.margin = '20px';
tag.style.padding = '10px';
tag.style.fontSize = "large";
}
function btnStyle(button){
button.style.backgroundColor = 'red';
button.style.color = 'white';
//button.style.margin = '20px';
//button.style.float = 'left';
//tag.style.padding = '10px';
//button.style.fontSize = "large";
button.style.border = 'none';
}