CRUD com JavaScript

Programação
#1

Olá amigos, bom sou novo no JavaScript e estou fazendo um exercício do curso, preciso fazer um crud com JavaScript a até aqui já criei minha pagina e consegui submeter informação no formulário e mostrando na minha Table.

Minha duvida é: Como consigo fazer para alterar o que foi submetido e deletar??

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Agenda de Contatos</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
	<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>
	<script src="js/index.js"></script>
</body>
</html>

index.js

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');

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();

});

Qualquer dica é super bem vinda para poder resolver o problema.

#2

alguém???

#3

No caso você teria que criar um array para armazenar os contatos, no caso, pelo o que entendi. Você apenas armazenou o corpo dos elementos do formulario.

o ideal é

//objeto contato com os elementos da página
let contato = {
nome: document.querySelector("#campo-nome"),
endereco: document.querySelector("#campo-endereco"),
bairro: document.querySelector("#campo-bairro"),
telefone-fixo: document.querySelector("#campo-telefoneFixo"),
celular: document.querySelector("#campo-celular"),
};

//array para que os contatos sejam armazenados
let contatos = [ ];

//pega os dados

contatos.push(contato); //adiciona contato na ultima posição
contatos.pop( ); //retira ultimo
contatos.splice(posição inicial, posição final); //Elimina elemento de acordo com a posição, caso inicial seja 0 e final 2, elimina os contatos que estão na posição 0 até 2

com isso você já consegue fazer o crud

//por exemplo, ira mostra o nome do ultimo objeto da lista
contato.nome.innerHTML = contatos.pop( );

#4

Com isso já dá para brincar, bora 0/

#5

Opa! obrigado pela ajuda. esqueci de colocar como resovido.