CRUD with Javascript

Question

Well, I need to make one CRUD and then a search of what is submitted on my form.

I already created the page and can already submit my form and show in a table.

Doubt: I am in doubt of how to remove and alter my already submitted object.

var contatos = [ 
  document.querySelector("#campo-nome"),
  document.querySelector("#campo-endereco"),
  document.querySelector("#campo-bairro"),
  document.querySelector("#campo-telefoneFixo"),
  document.querySelector("#campo-celular"),
];
//console.log(contatos);
  
document.querySelector('#formulario').addEventListener("submit", function(event){

  event.preventDefault();

  var tr = document.createElement('tr');

  /*campo é o meu elemento, como se fosse o i.*/
  contatos.forEach(function(posicao) {
    td = document.createElement('td');
    td.textContent = posicao.value;
    tr.appendChild(td);
  });

  var tabela = document.querySelector("table tbody");

  tabela.appendChild(tr);

  for(var i=0;i <=contatos.length;i++){
    this[i].value ='';
  }

  contatos[0].focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="container">
    <h1>Agenda Contatos</h1>
  </div>
</header>
<main class="container">
  <section>
    <h2>Meus Contatos</h2>
    <table>
      <tr>
        <th>Nome</th>
        <th>Rua</th>
        <th>Bairro</th>
        <th>Telefone Fixo</th>
        <th>Telefone Celular</th>
      </tr>
      <tbody class="contato">
        
      </tbody>
    </table>
  </section>
  <section>
    <h2>Cadastro de Contatos</h2>
    <form id="formulario" >
      <fieldset>
        <label for="campo-nome">Nome:</label>
        <input id="campo-nome" type="text" placeholder="digite o nome do seu Contato">
      </fieldset>
      <fieldset class="campo-endereco">
        <label for="campo-endereco">Rua:</label>
        <input id="campo-endereco" type="text" placeholder="digite o endereço do seu Contato">
      </fieldset>
      <fieldset class="campo-bairro">
        <label for="campo-bairro">Bairro:</label>
        <input id="campo-bairro" type="text" placeholder="digite o seu bairro do seu Contato">
      </fieldset>
      <fieldset class="campo-endereco">
        <label for="campo-telefoneFixo">Telefone Fixo:</label>
        <input id="campo-telefoneFixo" type="text" placeholder="digite o telefone Fixo">
      </fieldset>
      <fieldset class="campo-TelefoneCelular">
        <label for="campo-celular">Telefone Celular:</label>
        <input id="campo-celular" type="text" placeholder="digite o telefone Celular">
      </fieldset>
      <button id="adicionar-contato" class="botao bto-principal">Adicionar</button>
    </form>
  </section>
</main>

Answer 1

To remove and change you will do the same process by passing the ID.

Remove

To remove, quite simply, Voce will click the record of the table that Voce clicked, and send the selected ID. That way Voce makes a delete by passing the ID.

Update

The update is as Voce did in create. However Voce will send the ID. In this case, Voce will update passing the ID that will send, and changes the fields.