Я работаю над добавлением функции сравнения на веб-сайте, поэтому на текущей странице есть некоторые результаты, которые имеют флажок с именем add to compare attach.
Поэтому, когда пользователь нажимает флажок «Добавить для сравнения», выбранный результат добавляется к одному compare box div и этот процесс продолжается.
моя проблема в том, что когда пользователь хочет снять или удалить выбранный результат из compare div box он должен уметь его удалить.
Вот мой код, который я сделал до сих пор
HTML
<div id='compare_box'> <form action="compare_results.php" method="POST"> <div id='result'> </div> <button id="compare_submit" type="submit" class="btn btn-primary btn-sm">compare</button> </form> </div> <div class="col-md-3 photo-grid " style="float:left"> <div class="well well-sm"> <h4><small><?php echo $title; ?></small></h4> <br> <div class="features"> <div id="compare_feature"> <input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare </div> <button class='btn btn-sm btn-info favourite_feature' value="<?php echo $id;?>">add to favourite</button> </div> </div> </div>
CSS
#compare_box { display: none; }
ajax call
$(".compare").change(function() { if(this.checked) { $('#compare_box').show(); var check = $(this).val(); $.ajax({ type: 'POST', url: 'compare.php', dataType : "JSON", data:{value : check}, success: function(data) { console.log(data); console.log(data.id); var output = "<div class='col-md-3 photo-grid' style='float:left'>"; output += "<div id='course_title' class='well well-sm'>"; output += "<h4>"+data.title+"</h4>"; output+="<textarea class='hidden' id='hidden_title' name='course_title[]' value=>"+data.title+"</textarea>"; output+="</div>"; output+="<input type='hidden' id='hidden_id' name='course_id[]' value="+data.id+">"; output+="</div>"; $('#result').append(output); } }); } });
PS: Я пытаюсь реализовать что-то вроде этого