删除parentElement并在重新加载时保存更改

Question

HTML代码

<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>

我有3个[按钮]

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


    });
}

我尝试过，这是第一次工作，但是当我重新加载时，我错过了更改。

Answer 1

我认为您可以使用localstorage来跟踪已删除的parentElement。只需检查您的localstorage是否删除了parentElement，如果已经删除了parentElement，则只需隐藏行类的元素即可。单击按钮后，它将不显示任何内容。希望对您有所帮助。

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

          });
        }


      }