i have problem with delete items in my To Do List app.
How i can delete items?
I think i need set display:none;
on parent of delete button, but i need some help with this.
How i can select parent of button?
I do some research and probably i need use this.
, but i don't know how to use it.
Adding task's works pretty good.
My code:
HTML:
<div class="form">
<input type="text" id="toDo" placeholder="To do...">
<button id="addToDo">Add</button>
</div>
<div class="list">
<div class="toDo">
<p>Do homework</p>
<button id="delToDo">Delete</button>
</div>
<div class="toDo">
<p>Do smth</p>
<button id="delToDo">Delete</button>
</div>
</div>
JS:
const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");
addButton.addEventListener("click", addTask, false);
delBtn.addEventListener("click", delTask, false);
function addTask() {
const textToDo = document.querySelector("#toDo").value;
var list = document.querySelector(".list");
var divToDo = document.createElement("div");
var p = document.createElement("p");
var delButton = document.createElement("button");
divToDo.setAttribute("class", "toDo");
delButton.setAttribute("id", "delToDo");
delButton.textContent = "Delete";
p.textContent = textToDo;
divToDo.appendChild(p)
divToDo.appendChild(delButton);
list.appendChild(divToDo);
}
function delTask() {
}