Estou criando uma lista de itens com JQuery que é renderizada na tela de acordo com o que é digitado no input.
Para exibir o elemento na tela (Nome do item, botão de alterar e botão de remover) o javascript adiciona o valor digitado em um array de objetos juntamente com um ID que eu chamei de idSimbolico, para poder identificar cada item na hora de deletar ou alterar um item, em seguida é realizado um array.map()
para renderizar os itens do array na tela.
Porém o problema é que sempre que eu digito um novo texto para criar e renderizar o novo item, o array.map renderiza novamente tudo o que está no array inclusive os itens que já estão na tela, tornando minha lista redundante.
Minhas dúvidas são as seguintes:
1 - Como eu faço para que o array.map renderize apenas os itens que já não estão na tela?
2 - Na hora de deletar um item da tela clicando no botão remover,como eu faço para excluir apenas aquele item clicado (da tela e do array).
HTML
<div class="">
<div id="lista-itens">
<div id="titulo">Lista de Itens</div>
</div>
</div>
<div class="">
<input type="text" id="txtItem">
<button type="button" onClick="save()">SALVAR</button>
</div>
Javascript / JQUERY
var itens = [];
var idSimbolico = 0;
function save(){
var id = idSimbolico += 1;
var txtItem = $('#txtItem').val();
itens.push({
id: idSimbolico,
nome: txtItem
});
itens.map(item => {
$("#titulo").append(`
<div id="item">
<div id="nomeDoItem">${item.nome}</div>
<input type="hidden" value="${item.id}">
<div>
<button>Alterar</button>
<button>Deletar</button>
</div>
</div>
`);
});
}