remove parentElement and saving changes when reload again

Question

Html code

<div class="cont">
  <div class="row">
    <p>anything</p>
    <input type="button" id="1" class="Done" name="Go" value="done">
  </div>

   <div class="row">
     <p>anything</p>
     <input type="button" id="2" class="Done" name="Go" value="done">
   </div>
   <div class="row">
     <p>anything</p>
     <input type="button" id="3" class="Done" name="Go" value="done">
   </div>

 </div>

I have 3 of them[buttons]

javascript

var remove=document.getElementsByClassName("Done")

for(var i=0;i<remove.length;i++){
    var button=remove[i]
    button.addEventListener('click',function(event){
        var bclick = event.target
        bclick.parentElement.remove()


    });
}

I tried that, it's work for the first time but when I reload I miss changes.

Answer 1

I think you can use localstorage to track your removed parentElement. Simply check your localstorage whether your parentElement is removed or not, if it is removed already just hide your row class's elements. It will show nothing once button is clicked. Hope it will help.

var remove = document.getElementsByClassName("Done");

for (var i = 0; i < remove.length; i++) {

  var button = remove[i];

  if (button) {

    if (window.localStorage.getItem(remove[i].id) == 'true') {

      document.getElementById(remove[i].id).parentNode.style.display = 'none';

    }
  }
}

for (var i = 0; i < remove.length; i++) {

  var button = remove[i];

  if (button) {
    button.addEventListener('click', (event) => {
      var bclick = event.target;
      window.localStorage.setItem(bclick.id, 'true');
      bclick.parentElement.remove();

    });
  }
}