Olá pessoal, como vão?
Estou com um problema de CSS que quando coloco para alternar entre as classes ele faz algumas alterações mas na principal ele não faz que ao clicar em concluir ele deve "cortar" a linha. Alguem sabe me dizer onde estou errando?
const conclusao = function() {
let botaoConcluir = document.createElement('button');
botaoConcluir.classList.add('check-button');
botaoConcluir.innerText = 'Concluir';
botaoConcluir.addEventListener('click', function (event) {
let alvo = event.target;
let concluido = alvo.parentElement;
concluido.classList.toggle('done');
})
return botaoConcluir;
}Código completo:
const botao = document.querySelector(".botao");
botao.addEventListener('click', function(event) {
event.preventDefault();
adicionar();
conclusao();
})
const adicionar = function () {
const input = document.querySelector(".input");
const valor = input.value;
const conteudo = `<p class="conteudo">${valor}</p> `;
const ul = document.querySelector(".lista");
const li = document.createElement("li");
li.classList.add('task');
ul.appendChild(li);
li.innerHTML = conteudo;
li.appendChild(conclusao());
input.value = '';
}
const conclusao = function() {
let botaoConcluir = document.createElement('button');
botaoConcluir.classList.add('check-button');
botaoConcluir.innerText = 'Concluir';
botaoConcluir.addEventListener('click', function (event) {
let alvo = event.target;
let concluido = alvo.parentElement;
concluido.classList.toggle('done');
})
return botaoConcluir;
}