Solucionado
Estou fazendo um To do List usando MVC, tenho um array que salva as tarefas adicionadas pelo usuario e apartir desse array eu crio elementos no DOM. Tem como eu referenciar o item especifico do array apartir de um click no DOM? Por exemplo, como posso excluir um item da lista quando seu elemento DOM for excluido?
tentei algo parecido com :
return array.lista.map(tarefa =>{
return `
<button onclick='controller.conclui(event, ${tarefa})'>
</button>
}
}).join('');Tentei utilizar isso para conseguir um link a esse item, porem não funciona, tem algo parecido que eu possa utilizar?
Fala ai José, tudo bem? Acho que você pode fazer pelo índice do array, no caso, dentro do seu botão, poderia fazer com data attribute.
A ideia seria adicionar um data-index com a posição dele no array.
return array.lista.map((tarefa, indice) =>{
return `
<button data-index="${indice}" onclick='controller.conclui(event, ${tarefa})'>
</button>
}
}).join('');Ou poderia fazer via JavaScript com addEventListener:
array.lista.map((tarefa, indice) => {
const botao = document.createElement('button')
botao.textContent = 'Algum texto';
botao.addEventListener('click', () => {
console.log(tarefa)
})
})Mas iria mudar bastante o código e a maneira como cria os itens na tela, tente com a primeira ideia.
Espero ter ajudado.
Obrigado pela resposta, mas eu obtenho um erro em
onclick='controller.conclui(event, ${tarefa})'Uncaught SyntaxError: Unexpected identifier
sabe qual pode ser o erro?
Fala ai José, o problema é que você está usando template string e a variavel tarefa.
O problema vai ser nela, isso porque quando o navegador executá-la, a mesma não vai existir no contexto global da página.
Tenta passá-la como data-atribute, ai dentro da função conclui você lê esse atributo, algo assim: dataset.NOME_DO_ATRIBUTO.
Onde o NOME_DO_ATRIBUTO seria o data-NOME_DO_ATRIBUTO.
No caso: data-tarefa ficaria dataset.tarefa.
Espero ter ajudado.