Delete an item and add again by starting index by counting 1 {ERROR}

Question

When you add name, age and quantity will count for index ,but when you click to rule out erases everything quantity stays = 0 , name and age = by "empty" right there, but when I add again, the quantity starts with 2 (index) but I want to start with 1

Why did you stay for 2 ?

tried various things here I don’t know what to do, what I do?

let a = []

function adicionar() {
  var nome = document.getElementById("nome")
  var idade = document.getElementById("idade")
  var r = document.getElementById("res")
  if (nome.value == "" && idade.value) {
    alert("Por favor digite o seu nome e sua idade!")
  }
  if (nome.value.length && idade.value.length) {
    a.push(nome)
    r.innerHTML += ` <tr><th scope="row">${a.length}</th><td>${nome.value}</td><td>${idade.value}</td>`
  }
}


function excluir() {
  var n = [nome, idade]
  v = "vazio"
  z = []
  z.slice(n)
  document.getElementById("res").innerHTML = `<th scope="row">${z.length}</th><td>${v}</td><td>${v}</td>`
}

<div class="container">
  <h1 class="text-center mt-3">
    Agenda
  </h1>
</div>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Quantidade</th>
        <th scope="col">Nome</th>
        <th scope="col">Idade</th>
      </tr>
    </thead>
    <tbody id="res">
    </tbody>
  </table>
</div>
<div class="container text-center">
  <button class="btn btn-danger" type="button" onclick="excluir()">Excluir</button>
  <button class="btn btn-warning" type="button" onclick="editar()">Editar</button>
</div>
<div class="container">
  <div class="text-center">
    <h1 class="text-center mt-2 mb-4">Adicione por aqui!</h1>
    <input type="text" id="nome" name="nome" placeholder="NOME">
    <input type="number" name="idade" id="idade" placeholder="IDADE">
    <button class="btn btn-primary" type="submit" id="btn" onclick="adicionar()">Adicionar</button>
  </div>
</div>

Answer 1

Showcase 2 because the function excluir does not change the array a (it continues having the elements, the problem is that the function adicionar only adds the data in the array, but only prints the last added).

If the idea of function excluir is clear everything, so just reset the array (assign it to an empty array, for example).

I would also leave a separate function to update the table.

let dados = [];

function adicionar() {
  var nome = document.getElementById("nome").value;
  var idade = document.getElementById("idade").value;
  if (nome == "" || idade == "") {
    alert("Por favor digite o seu nome e sua idade!");
    return; // se não foi preenchido, sai da função
  }
  // se está ok, adiciona nos dados
  dados.push({ nome, idade });
  atualizaTabela();
}

function excluir() {
  dados = [];
  atualizaTabela();
}

function atualizaTabela() {
  var r = document.getElementById("res");
  if (dados.length == 0) {
    r.innerHTML = '<tr><th scope="row">0</th><td>vazio</td><td>vazio</td>';
  } else {
    r.innerHTML = '';
    for (var i = 0; i < dados.length; i++) {
      r.innerHTML += `<tr><th scope="row">${i + 1}</th><td>${dados[i].nome}</td><td>${dados[i].idade}</td>`;
    }
  }
}

<div class="container">
  <h1 class="text-center mt-3">
    Agenda
  </h1>
</div>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Quantidade</th>
        <th scope="col">Nome</th>
        <th scope="col">Idade</th>
      </tr>
    </thead>
    <tbody id="res">
    </tbody>
  </table>
</div>
<div class="container text-center">
  <button class="btn btn-danger" type="button" onclick="excluir()">Excluir</button>
  <button class="btn btn-warning" type="button" onclick="editar()">Editar</button>
</div>
<div class="container">
  <div class="text-center">
    <h1 class="text-center mt-2 mb-4">Adicione por aqui!</h1>
    <input type="text" id="nome" name="nome" placeholder="NOME">
    <input type="number" name="idade" id="idade" placeholder="IDADE">
    <button class="btn btn-primary" type="submit" id="btn" onclick="adicionar()">Adicionar</button>
  </div>
</div>

I renamed the array to dados (it’s still kind of generic, but it’s better than a, it says nothing about what the array is). It may seem like a crossbow detail, but give names better help when programming.

And I also put a semicolon at the end of the lines. It may sound "fresh," and I know that Javascript "accepts" the semicolon code and "works," but it avoids some bizarre situations that can occur if you don’t use them, like that one and that one (see more about this here).