I'm a beginner in the js area and I'm developing a code that stores the data in a table and saves it to the localStorage, so when I click the delete button that appears in this table, the line is cleared from my screen and the localStorage Also, can anyone help me?
<h3 class="center">CADASTRAR TAREFA</h3>
<div>
<label for="nomeTarefa">Nome da Tarefa</label>
<input placeholder="Insira o Nome da Tarefa" id="nomeTarefa" type="text" class="validate">
</div>
<div>
<label for="nomePropriedade">Propriedade da Tarefa</label>
<input placeholder="Insira a Propriedade da Tarefa" id="nomePropriedade" type="text" class="validate">
</div>
<div class="card-action">
<button class="waves-effect waves-light btn" id="cadastro">Cadastrar</button>
</div>
<h3 class="center">Tarefas Cadastradas</h3>
<div class="alerta">
<hr>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Propriedade</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
window.onload = function (){
document.querySelector("#cadastro").addEventListener("click",cadastrar)
/* for (var i = ;i >= 0) {
} */
}
var corpo_tabela = document.querySelector("tbody");
//Objetos
function inserirLinha(Tarefa){
var linha = document.createElement("tr");
var campo_nomeTarefa = document.createElement("td");
var campo_nomePropriedade = document.createElement("td");
var td_excluir = document.createElement("td");
var button = document.createElement("button");
button.innerHTML = "excluir";
campo_nomeTarefa.innerHTML=Tarefa.tarefa;
campo_nomePropriedade.innerHTML =Tarefa.prioridade;
td_excluir.appendChild(button);
linha.appendChild(campo_nomeTarefa);
linha.appendChild(campo_nomePropriedade);
linha.appendChild(td_excluir);
corpo_tabela.appendChild(linha);
}
//Funções
//contador, json
function cadastrar(){
var objeto ={
tarefa : document.querySelector("input[id = 'nomeTarefa']").value,
prioridade : document.querySelector("input[id = 'nomePropriedade']").value
};
var cont = localStorage.getItem('contador');
if(cont == null){
cont = 1 ;
localStorage.setItem("contador",cont);
}
var objetoJSON = JSON.stringify(objeto);
console.log(objetoJSON);
localStorage.setItem("tarefa"+ cont,objetoJSON);
cont++ ;
localStorage.setItem("contador", cont);
inserirLinha(objeto);
alert("Tarefa adicionada!");
}