javascript - 再次重新加载时删除 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，如果它已被删除，则只需隐藏您的行类的元素。单击按钮后它将不显示任何内容。希望对您有所帮助。

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

    });
  }
}