Botão (input) Cancelar não funciona

Oi bom dia,

Testei aqui e o erro não está nesse trecho de código, o botaoCancelar está inserindo a mensagem no console normalmente.

Se você conseguir upar o código no github, e passar o link do repositório eu dou uma olhada.

Opa, obrigado brother. Segue o código completo:

JS

let testes = []

    /*Função responsável por recolher as informações
  dos inputs e atribuir eles a uma variável*/
const criarTarefa = (evento) => {

  evento.preventDefault()


  const novasTarefas = document.querySelector('[data-cliente-add]')

  teste();

  const botaoConcluido = document.querySelector('[data-botao-concluido]')
  botaoConcluido.addEventListener ('click', concluirServico = () => {
    document.getElementById('teste').className = "lista__individual-concluido";
  })

  const botaoCancelar = document.querySelector('[data-botao-cancelar]')
  botaoCancelar.addEventListener ('click', deletarServico = () => {
    console.log('fui clicado')
  })


  const organizando = {
    cidadeCliente,
    dataFormatada,
    nomeCliente,
    telefoneCliente,
    enderecoCliente,
    servicoCliente,
    valorCliente
  }

  localStorage.setItem("criarTarefa", JSON.stringify(tarefasAtuais))
  const criarTarefa = JSON.parse(localStorage.getItem('criarTarefa')) || []

  const tarefasAtuais = [... criarTarefa, organizando]

  var liCriada = criarLi();

  novasTarefas.appendChild(liCriada);

}





    //Aciona o click do button e leva a execução da função.
const novaTarefa = document.querySelector('[data-form-adicionar]')
novaTarefa.addEventListener('click', criarTarefa)




function criarLi () {
    //Responsável por inserir o novo HTML vindo do formulário.
    const novaLi = document.createElement('li')
    const cabecalho = `    <h2 class="lista__cabecalho">${nomeCliente} | ${cidadeCliente} | ${dataFormatada}</h2>
          <ul class="lista__info" data-form-telefone>
            <li class="lista__telefone">
              <p class="telefone">Telefone:</p>
              <p class="tel">${telefoneCliente}</p>
            </li>
            <li class="lista__endereco">
              <p class="endereco">Endereço: </p>
              <p class="endereco1">${enderecoCliente}</p>
            </li>
            <li class="lista__block">
              <p class="lista__servico">Serviço: ${servicoCliente}</p>
              <p class="lista__valor">Valor: R$ ${valorCliente}</p>
            </li>
            <li class="lista__inputs">
              <input type="button" value="Concluído" data-botao-concluido>
              <input type="button" value="Cancelar" data-botao-cancelar>
            </li>
          </ul>`
    novaLi.innerHTML = cabecalho;
}


const jogarTarefas = () => {
  const lista = document.querySelector('[data-cliente-add]')
  const tarefasCadastradas = localStorage.getItem('criarTarefa') || []

  tarefasCadastradas.forEach((tarefa) => {

  })
}

function teste () {
  const cidadeInput = document.querySelector('[data-form-cidade]')
  const cidadeCliente = cidadeInput.options[cidadeInput.selectedIndex].text

  const dataInput = document.querySelector('[data-form-data]')
  const dataDoServico = moment(dataInput.value)
  const dataFormatada = dataDoServico.format("DD/MM/YYYY - HH:mm")

  const nomeInput = document.querySelector('[data-form-nome]')
  const nomeCliente = nomeInput.value

  const telefoneInput = document.querySelector('[data-form-telefone]')
  const telefoneCliente = telefoneInput.value

  const enderecoInput = document.querySelector('[data-form-endereco]')
  const enderecoCliente = enderecoInput.value

  const servicoInput = document.querySelector('[data-form-servico]')
  const servicoCliente = servicoInput.value

  const valorInput = document.querySelector('[data-form-valor]')
  const valorCliente = valorInput.value
}

Obrigado desde já a ajuda!

Então pelo que percebi o erro está no addEventListener nos botões concluir e cancelar, você precisa adicionar eles de forma dinâmica, para conseguir adicionar o EventListener de forma separada para cada Item da lista, você pode fazer o seguinte:

1º - muda o scopo const novasTarefas = document.querySelector('[data-cliente-add]') para o escopo global, para você conseguir adicionar o EventListener no botão cancelar e concluir, sem precisar passar as novasTarefas como parâmetro do criarLi()

2º - depois de novaLi.innerHTML = cabecalho; você vai colocar o seguinte código:

const cancelButton = document.createElement('button');
cancelButton.innerHTML = 'Cancelar';

novaLi.appendChild(cancelButton);
cancelButton.addEventListener('click', function () {
    novasTarefas.removeChild(novaLi);
});

Com isso você vai estar criando um botão dentro da li, você pode extrair isso para uma função depois.

3º - Você vai colocar novaTarefa.appendChild(novaLi); e vê se funciona, caso não funcione mesmo com a novaTarefa em scopo global, você pode criar um query selector dentro da função criar li e depois dar append child nessa variavel.