He estado tratando de hacer una lista de tareas simples para aprender javascript y he podido agregar y mostrar una tarea, pero no puedo encontrar la manera de eliminarla. He creado un botón de eliminación pero no puedo hacer que funcione, no sucede nada cuando se hace clic. Así que cualquier ayuda sería genial, ¡gracias!
function handleSubmit(event){
event.preventDefault();
let value = getInputValue();
if(value !== false){
addToDom(value);
eraseInput();
}
}
const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);
function getInputValue() {
const input = document.querySelector("#todo-input");
let value = input.value;
value = value.trim();
if (value === '') {
alert("You can not submit an empty field");
return false;
}
else {
return value;
}
}
function addToDom(value) {
const list = document.querySelector("#list");
const removeButton = document.createElement("button");
removeButton.innerHTML = 'remove';
removeButton.classList.add("complete-btn");
list.appendChild(removeButton);
list.innerHTML += "<li>" + value + "</li>";
console.log(list);
removeButton.addEventListener('click', removeItem)
}
function removeItem(event){
event.parentElement.remove();
}
function eraseInput() {
const input = document.querySelector("#todo-input");
input.value = "";
input.focus();
}
El problema se debe a que define y agrega removeButton al DOM, pero inmediatamente después sobrescribe el HTML del elemento principal, lo que elimina el botón.
Para solucionar el problema, debe ser coherente en la forma en que crea y agrega los elementos al DOM.
Además, como señaló @Teemu en los comentarios, debe usar event.target.parentElement en su función removeItem() .
function addToDom(value) {
const removeButton = document.createElement("button");
removeButton.innerHTML = 'remove';
removeButton.classList.add("complete-btn");
removeButton.addEventListener('click', removeItem);
const li = document.createElement('li');
li.textContent = value;
li.appendChild(removeButton);
document.querySelector("#list").appendChild(li);
}
function removeItem(event){
event.target.parentElement.remove();
}
Aquí hay un ejemplo de trabajo completo:
function handleSubmit(event) {
event.preventDefault();
let value = getInputValue();
if (value !== false) {
addToDom(value);
eraseInput();
}
}
const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);
function getInputValue() {
const input = document.querySelector("#todo-input");
let value = input.value;
value = value.trim();
if (value === '') {
alert("You can not submit an empty field");
return false;
} else {
return value;
}
}
function addToDom(value) {
const removeButton = document.createElement("button");
removeButton.innerHTML = 'remove';
removeButton.classList.add("complete-btn");
removeButton.addEventListener('click', removeItem);
const li = document.createElement('li');
li.textContent = value;
li.appendChild(removeButton);
document.querySelector("#list").appendChild(li);
}
function removeItem(event) {
event.target.parentElement.remove();
}
function eraseInput() {
const input = document.querySelector("#todo-input");
input.value = "";
input.focus();
}
ul button { margin: 0 0 0 5px; }
<form id="todo-list-form">
Item: <input type="text" id="todo-input" />
<button type="submit">Add</button>
<ul id="list"></ul>
</form>