List CRUD with Jquery

Question

I am creating a list of items with Jquery that is rendered on the screen according to what is typed in the input.

To display the element on the screen (Item name, change button, and remove button) javascript adds the entered value in an object array along with an ID I called idSimbolico, in order to be able to identify each item when deleting or changing an item, then is performed a array.map() to render the array items on the screen.

But the problem is that whenever I type in new text to create and render the new item, the.map array renders again everything that’s in the array including the items that are already on the screen, making my list redundant.

My doubts are as follows::

1 - How do I make the.map array to render only items that are no longer on the screen?

2 - At the time of deleting an item from the screen by clicking the remove button, how do I delete only that clicked item (from the screen and from the 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>
    `);
    });
  }

Answer 1

You got off to a good start in your approach, but you misunderstood how .map works.

.map will return a new array, based on this you can generate an array of strings, using Join you can join them into a single string.

After that, you need to clear the element, then include the items you want.

All this can be simplified with a .reduce also. Also, you can turn the strings into jQuey objects, so you can add behaviors/events... There are several possibilities.

I took the liberty of giving an improved on your sample code.

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>