Currently, I am tackling a todo list project but facing a challenge in finding a vanilla Javascript solution to remove a list item once it has been clicked.
Adding user input as list items was relatively simple, but I have come to realize that this specific aspect of the task is more complex than I initially thought.
This project marks my introduction to JS. Each time a list item is added, a button element is included within the list item as a child.
The goal is for the user to click this button and have that particular list item removed from the unordered list.
Any suggestions on how to achieve this?
document.getElementById("add").addEventListener("click", function() {
var taskinput = document.getElementById("task").value;
if (taskinput) {
var tasktext = document.createTextNode(taskinput);
var list = document.createElement("li");
list.appendChild(tasktext);
var button = document.createElement("button");
button.setAttribute("id", "completed");
button.innerHTML = "completed";
list.appendChild(button);
document.getElementById("task-to-do").appendChild(list);
document.getElementById("task").value = "";
} else {
alert("Please enter a task");
}
document.getElementById("completed").addEventListener("click", function() {
})
})ul {
list-style: none;
}
ul li {
position: relative;
margin: auto;
width: 80%;
padding: 2% 2% 2% 2%;
margin-bottom: 10px;
color: white;
border: 1px solid white;
border-radius: 3px;
background-color: #6363B6;
}
li button {
display: block;
width: auto;
height: auto;
padding: 1%;
clear: both;
float: right;
background-color: #6363B6;
}<div id="incomplete-tasks">
<h4>INCOMPLETE TASKS</h4>
<ul id="task-to-do">
</ul>
</div>