jQuery éléments de comptage de manière incorrecte

Question

Ce que je l'ai déjà bricolé (merci à Stack Overflowers):

J'ai une série de modules de produits, dont chacun contient un nom de produit et une case à cocher. Cochez une case pour ajouter le nom de produit correspondant à une liste ailleurs sur la page, décocher une case à cocher supprime le nom du produit correspondant de la liste. Lorsque l'utilisateur soumet le bouton 'Comparer', j'ai besoin de jQuery pour vérifier le nombre de sélections, en confirmant un minimum de deux et un maximum arbitraire.

Mon problème: le fichier jQuery suivant ne semble pas prendre en compte les éléments qui ont été supprimés (en les décochant). Par exemple, si je coche une case à cocher, puis décochez-la - et elle n'est pas cochée, et elle est retirée de la liste - et puis revérifiez-la, jQuery rapporte qu'il y a 2 éléments à comparer.

<div class="product-module"> 
<div class="product-pic"> 
    <div class="checkbox-wrapper"> 
     <label for="compare1"> 
      <input type="checkbox" class="checkbox" name="compare" id="compare1" /> 
      Compare 
     </label> 
    </div> 
</div> 

<div class="product-info"> 
    <p><a href="#" title="#"><span class="product-name">Product Name here</span></a></p>  
</div> 
</div> 


<div class="compare"> 
<ul> 
</ul> 
<p class="compare-button"><button type="submit">Compare</button></p> 
<p class="clear-selections"><a class="button" id="clear-selections" href="#">Clear Selections</a></p> 
</div> 

Script:

// clear all checkboxes on load 
$(function(){ 
    $('input[type="checkbox"]').attr('checked', false); 
}); 


    $(function(){ 
    $('.column-main input[type="checkbox"]').click(function() { 
     var title = $(this).closest('.product-module').find('.product-name').html(); 

     // if user checks the checkbox, add the item to the ul 
     if ($(this).attr('checked')) { 
     var html = '<li><a href="'+title+'">' + title + '</a></li>'; 
     $('.compare ul').append(html); 

     // if user un-checks the checkbox, remove the item from the ul 
     } else if ($(this).attr('checked', false)) { 
     $('li a[href="' + title + '"]').remove(); 
     } 
    }) 
}) 


$(function(){ 
    $('.clear-selections').click(function(){ 
     $('.compare ul').empty(); 
     $('input[type="checkbox"]').attr('checked', false); 
    }) 
}); 

    $(function(){ 
    $('.compare button').click(function(){ 
     minRequests = 2; 
     maxRequests = 3; 
     requested = $('.compare ul li').size(); // go figure: why not .length()? 

     if(requested < 2) { 
     alert ('Compare ' + requested + ' products?'); 

     } else if((requested >= 2) && (requested <= 5)) { 
     alert ('There are ' + requested + ' products to compare'); 

     } else { 
     alert (requested + ' is too many'); 
     } 
    }); 
}); 

Answer 1

Le problème est ici:

$('li a[href$="' + title + '"]').remove(); 

Vous supprimons la 'une' étiquette à l'intérieur du 'li', mais en laissant le 'li' - qui est ce que vous comptez plus tard.

Essayez:

$('li a[href$="' + title + '"]').parent().remove();