<!DOCTYPE<DOCTYPE html>
<head>
</head>
<body>
Nome: <input type="text" id="nome">
Valor: <input type="number" step="any" id="valor">
Vencimento: <input type="date" id="vencimento">
<button id="botao-salvar" onclick="salvarDados()">Salvar</button>
<table border="1" id="campo">
<legend>Contas a Pagar</legend>
<tr>
<th>Nome</th>
<th>Valor</th>
<th>Vencimento</th>
</tr>
</table>
<script>
var teste = 0;
function salvarDados(){
var nome = document.getElementById("nome").value;
var valor = document.getElementById("valor").value;
var vencimento = document.getElementById("vencimento").value;
if (!(nome == '' || valor == '' || vencimento == '')) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var btn = document.createElement("button");
td1.innerHTML = nome;
td2.innerHTML = valor;
td3.innerHTML = vencimento;
btn.innerHTML = "deletar";
btn.onclick = deletar;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(btn);
tr.id = 'linha' + teste;
teste++;
document.getElementById("campo").appendChild(tr);
limparCampos();
}else {
alert('Todos os campos precisam estar preenchidos !!');
}
}
function limparCampos(){
var nome = document.getElementById("nome");
var valor = document.getElementById("valor");
var vencimento = document.getElementById("vencimento");
nome.value = '';
valor.value = '';
vencimento.value = '';
}
function deletar(teste2) {
var linha = document.getElementById('campo');
linha.remove();
}
</script>
</body>
</html>
Adicionei uma forma de atribuir ID para cada linha que for adicionada. com
tr.id = 'linha' + teste;
teste++;
Mas ainda não consigo encontrar o ID selecionado e deletar apenas essa linha.