如何通过在 jquery 中按下按钮来删除 div

Question

我正在尝试解决jquery的可拖动问题，有代码可以从数据库中检索信息，每个信息都显示在数据库每一行的每个BOX中。

draggable 可以正常工作，拖动到删除框时也可以正常工作。

每个 div 框都带有一个名为“remove”的按钮，该按钮用于删除单个 div 框（不是所有 div 框同时）。问题是按下按钮删除每个单独的 div 框并没有删除，只允许我删除第一个框而不是其余的框。请查看 jquery 代码，因为您可以看到它所说的行

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

这条线不工作...

任何其他想法我该如何解决这个问题，让我可以让删除按钮工作！

这里是php代码。

<?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 
   }
}

?>

在 jquery 中 ....

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

Answer 1

每个 div 框都带有一个名为“删除”的按钮

我可以看到您使用的是 #remove，这基本上是错误的，因为 ID 必须是唯一的。

你的 jQ 可能是这样的：

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

使用事件委托来动态创建元素（如果需要的话……但以防万一……；））

Answer 2

由于 id 是唯一的，您需要使用 class 来代替您的 div。

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

另外，因为您的div 是动态生成的，所以所有事件都不适用于这些元素。在这种情况下，您可以使用 event delegation：

事件委托允许我们将单个事件侦听器附加到 父元素，将为匹配选择器的所有子元素触发， 这些孩子是现在存在还是将来添加。

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

所以基本上，这种技术将帮助您将点击处理程序附加到这些新添加的.remove div 元素上。