Setzen Sie die Daten nach dem Deaktivieren der Checkbox zurück

Question

Ich habe einige Ergebnisse in divs, jedes Ergebnis hat eine checkbox zugeordnet, wenn ein Benutzer auf einzelne Kontrollkästchen Benutzer, aktuelle Kontrollkästchen Wert wird auf eine andere Seite mit einem Ajax Anruf und Daten übergeben wird abgerufen und in einer versteckten Div-Box angezeigt.

Jetzt Problem ist, wenn Benutzer uncheck die checkbox es sollte die Daten mit dem Kontrollkästchen verbunden entfernen.

Mein Code ist:

<div id='compare_box'>     
</div> 

<div class="col-md-3 photo-grid " style="float:left">    
    <div class="well well-sm">    
    <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank"> 
     <h4><small><?php echo $title; ?></small></h4> 
    </a> 
    <br> 
    <input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare 
    </div> 
</div> 

Ajax-Aufruf

<script type="text/javascript"> 
$(document).ready(function() 
{ 


    $(".compare").change(function() { 
     if(this.checked) { 
     var check = $(this).val();  
     $.ajax({ 
     type: 'POST', 
     url: 'compare.php', 
     dataType : 'JSON', 
     data:{value : check}, 
     success: function(data) 
     { 
      console.log(data); 
      $('#compare_box').append(data); 

     } 
    }); 
} 

}); 
}); 

Answer 1

Verwendung so etwas wie dies den Inhalt des DIV zu leeren

 $('#compare_box').empty() 

Answer 2

bessere Weg ist, um die Referenzkarte zu halten, so etwas wie dieses

$(document).ready(function() { 
    var boxes = {}; 
    $(".compare").change(function() { 
    var check = $(this).val(); 
    var data = $(this).closest('.box').clone(); 

    if (this.checked) { 
     boxes[check] = data; 
     $('#comparebox').append(boxes[check]); 
    } else if (!this.checked && boxes[check]) { 
     boxes[check].remove(); 
     delete boxes[check]; 
    } 
    }); 
}); 

EDIT - arbeiten sollte ( nicht getestet)

var check = $(this).val(); 
if (this.checked) {  
    $.ajax({ 
    type: 'POST', 
    url: 'compare.php', 
    dataType: 'JSON', 
    data: { 
     value: check 
    }, 
    success: function(data) { 
     boxes[check] = $(data); 
     $('#compare_box').append(boxes[check]); 
    } 
    }); 
} else if(!this.checked && boxes[check]) { 
    boxes[check].remove(); 
    delete boxes[check]; 
} 

DEMO