Не удаляется товар из вишлиста после обновления страницы. Как настроить корректную работу local storage?

Question

[SiO4]

Делаю вишлист, и вроде бы все ок: после лайка карточка добавляется в нужный раздел, в локал стораж падает li элемент карты, при удалении карты на кнопку локал стораж очищается корректно. Но стоит добавить карточки и не удалив их обновить страницу, как начинается жопоболь — они не реагирует на кнопку удаления, причем новые добавленные карточки удаляет. Какие есть идеи?

document.addEventListener('DOMContentLoaded', () => {
    let wishlist = [];
    
    function setup() {
    console.log("loaded");
    const products = document.querySelectorAll(".like-button");
    for(let i=0; i<products.length; i++) {
        products[i].onclick = function(e) {
        addItem(e);
        
        }
    }
    }





    function addItem(e) {
        const productId = e.target.getAttribute("id");
            if(!wishlist.find(item => item === productId)) {
               console.log("Product: ", productId);
        const productDiv = document.getElementById("product" + productId);
        
        
  const wishDiv = document.createElement("li");
        wishDiv.setAttribute("id", "wish" + productId);
        wishDiv.setAttribute("class", "product");
        wishDiv.innerHTML = productDiv.innerHTML;
    
  const removeBtn = document.createElement("button");
        removeBtn.setAttribute("class", "button-delete-card");
        removeBtn.textContent = 'x';
        removeBtn.onclick = function() {removeItem(productId)};
        
        wishDiv.appendChild(removeBtn);
        wishDiv.insertBefore(removeBtn, wishDiv.firstElementChild);
        

        let aside = document.getElementById("wishlist");
        aside.appendChild(wishDiv)
        updateStorage()

    }

        wishlist.push(productId);
    }




    $(window).load(function () {
const initialState = () => {
        if (localStorage.getItem('products') !== null) {
      document.getElementById("wishlist").innerHTML = localStorage.getItem('products');

       
        }
    };
    initialState();   
});



  

const updateStorage = () => {
        let wishi = document.getElementById("wishlist");
       // console.log(wishi);
        let html = wishi.innerHTML;
        html = html.trim();
      //  console.log(html);
      //  console.log(html.length)

    if (html.length) {
         localStorage.setItem('products', html);
        } else {
         localStorage.removeItem('products');
    }};

    function removeItem(productId) {
        const product = document.getElementById("wish" + productId);
        console.log('productid:', productId)
        product.remove();
        updateStorage();
        wishlist = wishlist.filter(item => item !== productId);
       
  //  console.log(wishlist);
      

    }



    

    window.addEventListener("load", setup)

    });

Список
   <ul id="wishlist">
                   
                </ul>
карточка до добавления в вишлист
<li data-num="1" class="list-object" id="product1">
        <picture>
          <a href="1.html">
            <img src="1.jpg"/></a>
          <div class="like-button" id="1">
            <button id="1" class="like-button-button"><img src="images/like.png" class="pnglike"></button>
          </div>
        </picture>
        
</li>

// Карточка локл стоража (после)
<li id="wish2" class="product">
                      <button class="button-delete-card">x</button> 
                           <picture>
                              <a href="1.html">
                                <img src="1.jpg"></a>
                              <div class="like-button" id="2">
                                <button id="2" class="like-button-button"><img src="images/like.png" class="pnglike"></button>
                              </div>
                            </picture>
                            </li>

Answer 1

[Сергей]

Ты не вешаешь слушатели на кнопки когда восстанавливаешь из localstorage

Comments

[SiO4]

Сергей звучит как что-то очень похожее на истину. Правда, я добавил слушатель на эту кнопку, ошибок нет, но результат не изменился.

....
    $(window).load(function () {
const initialState = () => {
        if (localStorage.getItem('products') !== null) {
      document.getElementById("wishlist").innerHTML = localStorage.getItem('products');
    }}
    ;
   const listener = function() {
    let check = document.getElementById('button-delete-card');
      if (check !== null) {
        addEventListener("click", removeItem);
        }
    };
    listener()
    initialState();   
})
....

[Сергей]

SiO4, так ты кнопку берешь по id, но они у тебя идут с классами, будь внимательней