How can I remove div by pressing button in jquery

Question

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.

Each div box comes with button called "remove" that button is for removing the individual div box (NOT ALL div box same time). The problem is that pressing button to remove each individual div box is not removing, is only allow me to remove first box not not rest of boxes. please see jquery code as you can see the line where it said

 $(this).closest('.draggable').remove();

This line is not working...

Any other idea how can i solve that to allow me to make remove button work!

here is php code.

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

$product_id=$_POST['selector'];
$N = count($product_id);
for($i=0; $i < $N; $i++)
{
 $result = mysql_query("SELECT * FROM product where product_id='$product_id[$i]'");
 while($row = mysql_fetch_array($result))
   { ?>
      <div class="draggable" id="draggable[]" style="width:300px; height:200px">
   <div class="thumbnail">
      <div id="remove"><a class="button" href="#"><span class="search-icon">remove</span></a></div>
 <div class="control-group">
    <label class="control-label" for="inputEmail">product id</label>
    <div class="controls">
  <input name="member_id[]" type="hidden" value="<?php echo  $row['product_id'] ?>" />
 <input name="firstname[]" type="text" value="<?php echo $row['product_name'] ?>" />
    </div>
    </div>

 <div class="control-group">
    <label class="control-label" for="inputEmail">product category</label>
    <div class="controls">
 <input name="lastname[]" type="text" value="<?php echo $row['product_category'] ?>" />
    </div>
    </div>

 <div class="control-group">
    <label class="control-label" for="inputEmail">product price</label>
    <div class="controls">
 <input name="middlename[]" type="text" value="<?php echo $row['product_price'] ?>" />
    </div>
    </div>
 </div></div>

 <br>

   <?php 
   }
}

?>

And in jquery ....

$(function() {
    $('.draggable').draggable();
    $('#trash').droppable({
        over: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
    $('#remove').click(function(){
        $(this).closest('.draggable').remove();
    });
});

Answer 1

Since id is unique you need to use class instead for your div.

<div class="remove"><a class="button" href="#"><span class="search-icon">remove</span></a></div>

Also, because your div are dynamically generated so all the events will not be available for these elements. In this case you can use event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

$('body').on('click', '.remove' , function(){
    $(this).closest('.draggable').remove();
});

So basically, this technique will help you to attach click handler to these newly added .remove div elements in your case.

Answer 2

Each div box comes with button called "remove"

and as I can see you're using #remove which is basically wrong cause ID must be unique.

Than your jQ could look like:

$('#parentElement').on('click', '.remove', function(){
    $(this).closest('.draggable').remove();
});

using event delegation to dynamically created elements (if needed at all... but just in case.. ;) )