0

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>
    `);
    });
  }

1 Resposta 1

2

Você começou bem na sua abordagem, entretanto entendeu mal como .map funciona.

.map vai retornar um novo array, baseado nisso você pode gerar um array de strings, usando join pode unir eles em uma única string.

Depois disso, precisa limpar o elemento, para depois incluir os itens que você deseja.

Tudo isso pode ser simplificado com um .reduce também. Além disso, pode transformar as strings em objetos jQuey, para poder adicionar comportamentos/eventos... São várias as possibilidades.

Tomei a liberdade de dar uma melhorada em seu código de exemplo.

let idSimbolico = 0
const itens = []
const $input = $('#txtItem')
const $container = $("#titulo")

const save = () => {
  idSimbolico += 1

  itens.push({
    id: idSimbolico,
    nome: $input.val()
  })

  render()
}

const render = () => {
  const html = itens.map(item => {
    return `
    <div id="item">
      <div id="nomeDoItem">${item.nome}</div>
      <input type="hidden" value="${item.id}">
      <div>
        <button>Alterar</button>
        <button>Deletar</button>
      </div>
    </div>
    `
  }).join('')

  $container.empty()
  $container.append(html)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .