on click remove elements

on click remove elements

I'm trying to solve the jquery draggable, there is code that retrieve information from database, each information show in each BOX from each row of database.

The draggable are works fine, and also works fine when drag to delete box, but each box comes with button called "remove"  and i'm trying to understand how can i write array code in jquery for user to click remove button to remove specific box NOT all box same time. 

thanks for your time.

please see code..


  1. <?php
  2. include('dbcon.php');

  4. $product_id=$_POST['selector'];
  5. $N = count($product_id);
  6. for($i=0; $i < $N; $i++)
  7. {
  8. $result = mysql_query("SELECT * FROM product where product_id='$product_id[$i]'");
  9. while($row = mysql_fetch_array($result))
  10.  { ?>
  11.       <div class="draggable" id="draggable[]" style="width:300px; height:200px">
  12.  <div class="thumbnail">
  13.       <div id="remove"><a class="button" href="#"><span class="search-icon">remove</span></a></div>
  14. <div class="control-group">
  15.     <label class="control-label" for="inputEmail">product id</label>
  16.     <div class="controls">
  17.   <input name="member_id[]" type="hidden" value="<?php echo  $row['product_id'] ?>" />
  18. <input name="firstname[]" type="text" value="<?php echo $row['product_name'] ?>" />
  19.     </div>
  20.     </div>
  22. <div class="control-group">
  23.     <label class="control-label" for="inputEmail">product category</label>
  24.     <div class="controls">
  25. <input name="lastname[]" type="text" value="<?php echo $row['product_category'] ?>" />
  26.     </div>
  27.     </div>

  29. <div class="control-group">
  30.     <label class="control-label" for="inputEmail">product price</label>
  31.     <div class="controls">
  32. <input name="middlename[]" type="text" value="<?php echo $row['product_price'] ?>" />
  33.     </div>
  34.     </div>
  35. </div></div>

  37. <br>
  38.   
  39.  <?php 
  40.  }
  41. }

  43. ?>

and in jquery code


  1.   $(function() {
  2.     $(".draggable").draggable();

  4.     $('#trash').droppable({
  5.         over: function(event, ui) {
  6.             $(ui.draggable).remove();
  7.         }
  8.     });
  9. });

  11. $(document).ready(function(){
  12.   $("#remove").click(function(){
  13.     $(".draggable").parent().remove();
  15.   });
  16. });