Comment ajouter plusieurs divs clonés à un tableau dans un stockage local, puis supprimer chacun d'entre eux en cliquant sur l'icône bascule?

Question

Chaque fois que je clique sur la balise 'a' => ('.favorite') .. Je veux cibler le parent et ajouter ce div entier à un tableau. Cette balise 'a' contient une icône qui va basculer entre deux classes comme vous pouvez le voir dans mon code. Quand le coeur est rempli, le parent sera cloné et ajouté à un nouvel onglet => '#fav.' Cependant, comme je l'ai déjà dit, je voudrais aussi ajouter cet objet à un tableau, puis quand le coeur se vide je voudrais pour supprimer cet objet uniquement du tableau existant et conserver tous les autres objets.

Donc, fondamentalement, le problème est que je ne sais pas comment faire cela. Stockez chaque objet dans la baie de stockage local, puis supprimez chaque objet de la baie si nécessaire, comme expliqué ci-dessus.

J'apprécierais que quelqu'un puisse me diriger dans la bonne direction.

HTML:

<div class="box not-selected" id="box1"> 
    <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a> 
    </div> 
    <div class="box not-selected" id="box2"> 
    <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a> 
    </div> 
    <div class="box not-selected" id="box2"> 
    <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a> 
    </div> 
    <div class="box" id="fav"></div> 

JS:

$('.favorite').on('click', function(){ 

    var par = $(this).parents('.box'); 

    //TOGGLE FONT AWESOME ON CLICK 
    if ($(par).hasClass('selected')) { 
    par.find('.favorite i').toggleClass('fa-heart fa-heart-o'); 
    } else { 
    par.find('.favorite i').toggleClass('fa-heart-o fa-heart'); 
    }; 

    // Clone div 
    var add = $(this).parent().parent(); 
    add.each(function(){ 
    if (par.find('.favorite i').hasClass('fa-heart')) { 

     var boxContent = ($(add).clone(true)); 
     var showHide = $(boxContent).find(".session").addClass('selected').removeClass('hidden-m'); 
     var get = $(boxContent).html(); 

     // Localstorage 
     var temp = localStorage.getItem('sessions'); 

     // Array with cloned divs 
     var tempArray = []; 

     tempArray.push(get); 

     var myJSONString = JSON.stringify(tempArray); 

     var parseString = $.parseJSON(myJSONString); 

     var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, ''); 

     var myJSONString = localStorage.setItem('sessions', finalString); 

    } else if (par.hasClass('selected').find('favorite').hasClass('fa-heart-o')) { 
     // remove div from array 
    }; 

    }); 
}); 

// Append item if localstorage is detected 
if (localStorage['sessions']) { 
    $("#fav").append(tempArray); 
}; 

Answer 1

Pour supprimer la div du tableau, suivant votre flux de travail fourni en poussant des œuvres fines

if (par.hasClass('selected').find('favorite').hasClass('fa-heart-o')) { 
    var target = $(boxContent).html().replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');; 
    var targetArr = $.parseJSON(localStorage.getItem('sessions')); 
    var index = targetArr.indexOf(target); 
    targetArr.splice(index,1); 
    var targetString = JSON.stringify(targetArr); 
    localStorage.setItem('sessions',targetString);   
};