Question

我正在尝试解决jquery draggable，有代码从数据库中检索信息，每个信息显示在每个数据库的每个BOX中。

拖动功能正常，拖动删除框时也能正常工作。

每个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”的按钮

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

比你的jQ看起来像：

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

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

Answer 2

由于ID是唯一的，因此您需要使用类代替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();
});

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

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

2 个答案: