Artikel von Array im lokalen Speicher jQuery

Question

Übersicht mit: Front-end basierte Suchliste

Technologie: HTML5 (local), CSS und jQuery

Funktionen: Artikel hinzufügen, löschen Artikel vor reload, Echtzeit

Problem zählen: Wenn ich Produkt hinzufügen, neu zu laden und versuchen, es aus dem Array zu entfernen wird es nicht funktionieren.

-Code, wo ich bin nicht sicher, wie das Problem zu lösen:

$("#wish_list_item").on("click", ".w-premove", function() { 
 
$product_id = $(this).attr("wpid"); 
 
$("#list_id_" + $product_id).remove(); 
 
wish_list = $.grep(wish_list, function(n, i) { 
 
    return n != $product_id; 
 
}); 
 
localStorage.setItem(wishlistkey, JSON.stringify(wish_list)); 
 
show_message("Product removed"); 
 
count_items_in_wishlist_update(); 
 
}); 
 
});

Link zu meiner Geige:https://jsfiddle.net/3ybwf3c3/4/

Lösung:https://jsfiddle.net/3ybwf3c3/6/

Code:

$("tr.wishlist-item").each(function(index, el) { wish_list.push(el.outerHTML); });

Answer 1

Die Frage ist hier:

wish_list = $.grep(wish_list, function (n, i) { 
    return n != $product_id; 
}); 

n enthält die HTML-String für ein ganzes tr Element, aber $product_id ist nur eine String-ID. Alles stimmt überein, und Sie setzen alle Zeilen in den lokalen Speicher zurück.

Da Sie das Produkt aus dem DOM entfernt, könnten Sie einfach das DOM für die neuen HTML-Strings erneut abfragen:

wish_list = []; 

$("tr.wishlist-item").each(function(index, el) { 
    wish_list.push(el.outerHTML); 
});