javascript - 取消选中复选框后重置数据

Question

我在 div 中有一些结果，每个结果都有一个 checkbox 与之关联，当用户单击单个复选框用户时，当前选中框的值使用 ajax 调用和数据传递到另一个页面被提取并显示在隐藏的 div 框中。

现在的问题是，当用户取消选中 checkbox 时，它应该删除与该复选框关联的数据。

我的代码是:

<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 调用

 <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

用这样的东西清空DIV的内容

     $('#compare_box').empty()