Delete from localStorage

Question

I’m a beginner in the js area and I’m developing a code that stores the data in a table and saves in localStorage, I need that when I click the delete button that appears in this table, the line is deleted from my screen and localStorage too, someone can 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!");

}

Answer 1

Add to object objeto within the method cadastrar() the property id

var objeto = {
  id: 'tarefa' + cont,
  tarefa : document.querySelector("input[id = 'nomeTarefa']").value,
  prioridade : document.querySelector("input[id = 'nomePropriedade']").value
};

Move him down from the condition: if(cont == null)

var cont = localStorage.getItem('contador');
if(cont == null){
    cont = 1;
    localStorage.setItem("contador", cont);
}
var objeto = {
  id: 'tarefa' + cont,
  tarefa : document.querySelector("input[id = 'nomeTarefa']").value,
  prioridade : document.querySelector("input[id = 'nomePropriedade']").value
};

Define the id row added equal to the new task:

var linha = document.createElement("tr");
...
linha.id = Tarefa.id;

Set the delete button event:

button.innerHTML = "excluir";
button.onclick = function(e) {
  // Remove tarefa
  localStorage.removeItem(Tarefa.id);
  // Remove a linha da tabela
  var tabela = document.querySelector('table');
  tabela.deleteRow(e.target.parentNode.parentNode.rowIndex);
}