Je crée une liste de tâches, et j'essaie d'obtenir que mon bouton de suppression efface réellement la tâche à laquelle il est ajouté. Encore assez nouveau à tout cela, appréciez toute aide donnée.Obtenir le bouton de suppression à supprimer dans une liste de tâches en utilisant le Javascript pur
Voici mon HTML:
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task" placeholder="Enter new task.">
<button id="submit">Create</button>
</div>
<section id="list">
</section>
</body>
Et voici mon javascript jusqu'à présent:
// Creating a new task
const button = document.getElementById("submit");
button.addEventListener("click",() => {
var taskInput = document.getElementById("task").value;
// Creating the text for list item.
if (taskInput === "") {
// Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var task = document.createElement("p"); // Create p element.
var text = document.createTextNode(taskInput); // Create text for list item.
task.appendChild(text); // Append text to p element.
listItem.appendChild(task); // Append p to list item.
}
// Create a delete button
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.setAttribute("class", "btn delete");
//Create an edit button
var editButton = document.createElement("button");
editButton.innerHTML = "Edit";
editButton.setAttribute("class", "btn edit");
editButton.setAttribute("onclick", "editThis(this)");
//Create button section
var buttons = document.createElement("div");
buttons.setAttribute("class", "buttons");
buttons.appendChild(editButton);
buttons.appendChild(deleteButton);
listItem.appendChild(buttons);
//Add new list item to list
var list = document.getElementById("list");
list.appendChild(listItem);
});
// Delete List Item
const removeItem = document.getElementsByClassName('delete');
removeItem.addEventListener("click", "removeThis(removeItem)");
function removeThis(removeItem) {
var parent = removeItem.parentElement.parentElement;
parent.parentElement.removeChild(parent);
}
Encore une fois, merci pour tous les conseils.