Question

我已经结束了我的项目。我在添加收藏夹和从本地存储中删除项目时遇到问题。它可以从html中删除它，但是当您刷新页面时，项目再次出现在这里。同时删除整个收藏夹，它不起作用。我希望有人看到我的错误

allan 267

Answer 1

我几乎没有更改您的代码，并且为所有按钮必需的功能添加了

    <h1>Your Favourite Recipes</h1>
    <p>These are your favourite recipes that we have saved for you.</p>
    <button id="probam" type="button" name="button" onclick="deleteListe()">brisi</button>
    <p id="fav"></p>
    <script>
    function deleteListe() {
        localStorage.removeItem("favorites");
    }

    function deleteElement(element) {
        const newFavorites = (localStorage.getItem('favorites')||"").replace(element,"");
        localStorage.setItem("favorites",newFavorites.split(",").filter(Boolean).join(","));
        setTimeout(()=>{
          localStorage.getItem('favorites')
          location.reload();
        },10);
    }

    let list = (localStorage.getItem('favorites')||"").split(",").filter(Boolean);


   var output = document.createElement('ul');
   output.setAttribute('id', 'list')

   list.forEach((el)=>{
       var it = document.createElement('li');
       var bt = document.createElement('button');
       bt.innerHTML = ('Delete');
       bt.setAttribute('class', 'delete');
       bt.setAttribute('title', el);
       it.appendChild(document.createTextNode(el));
       it.appendChild(bt);
       output.appendChild(it);
   });  

   document.getElementById('fav').appendChild(output);

   var del = document.getElementsByClassName('delete');

   for (let j = 0; j < del.length; j++) {
       del[j].addEventListener('click', function() {
            deleteElement(this.getAttribute('title'));
           (this.parentNode).parentNode.removeChild(this.parentNode);
       })
   }

    </script>
    <button type="button" name="button"></button>
    <a href="index.html" class='vido'>Home</a>

本地存储删除项目并删除列表

1 个答案: