Não entendo o que fiz de errado, ao clicar no botao concluir task quem deveria receber o estilo seria a linha da tarefa e nao o botao, sendo que eu coloquei o parentElement

Obrigado!!!!

 const criarTask = (evento) => {
    evento.preventDefault()
        //buscar ul
        const lista = document.querySelector('.list')
        const entrada = document.querySelector('[data-form-input]')
        const valor = entrada.value
        //console.log(valor)

        //criar li
        const task = document.createElement('li')
        //variavel->acessarClasse->addClasse
        task.classList.add('task')
        //criar p com valor do input
        const conteudo = `<p class"content">${valor}</p>`
        //colocar p criado dentro do html li (incluir <p> dentro do <li>)
        task.innerHTML = conteudo
        //criar btn
        task.appendChild(BtnConcl())
        //só criar o elemento nao é necessário, e preciso indicar ao DOM onde ele deve ser colocado
        lista.appendChild(task)
        //limpar form
        entrada.value = "" 
    }

    const novaTarefa = document.querySelector('[data-form-button]')
    novaTarefa.addEventListener('click', criarTask)

    const BtnConcl = () => {
        //criar botao
        const btnConcl = document.createElement('button')
        //add class
        btnConcl.classList.add('check-button')
        //renderizar texto em botao
        btnConcl.innerText = 'concluir'
        btnConcl.addEventListener('click', endTask)

    return btnConcl //como o btn está dentro d ali ele vai ser criado juntamente com a tarefa portano ver função de criar btn

    }

    const endTask = (evento) => {
        //selecionar btn evento
        const btnConcl = evento.target
        // subir a arvore para o pai, ja que se quer riscar a li e nao o button
        const taskComp = btnConcl.parentElement
        //aplicar efeito desejado ao cclicar
        taskComp.classList.toggle('done')

    }