如何在PHP中使用while/fetch創建的div上使用jQuery .remove（）？

Question

我有一個顯示數據庫中讀取和未讀消息的引導模式：

它顯示了一個通知徽章（參見上圖），如果有未讀郵件。我添加了一個刪除按鈕，但無法弄清楚如何刪除包含該特定按鈕的整個div，包括hr標籤。問題是，它只會刪除您在那裏看到的第二個div和hr標籤，但不是第一個。我甚至有一個警報設置，它顯示了第二個正確的div ID。第一個什麼都不做。這是我試過的。這是整個模式的div代碼：凡我想刪除

     <div id="msg_content_<?php echo $div_count;?>" class="msg-content"> 
          <div class="avatar-container"> 
           <a href="../pages/messages.php?id=<?php echo $msg_id; ?>" class="lighten"><img 
              src="<?php echo $avatar; ?>" class="msg-avatar"></a> 
           <div class="text-container"> 
            <span class="show-sender"><?php echo $sender_name; ?></span> 
            <span class="show-msg-status"><?php 
             if ($msg_seen == 0) { 
              echo "Unread"; 
             } else { 
              echo "Read"; 
             } 
             ?></span> 
            <br/> 
            <span class="show-msg"> Subject: <em><?php echo $subject; ?></em></span> 
            <button id="msg_delete_btn_<?php echo $div_count;?>" class="delete-btn">delete</button> 
            <br/> 
            <span class="show-timestamp"><?php echo date('D, F jS, Y h:i A', strtotime($timestamp)); ?></span> 
           </div> 
          </div> 
         </div> 
         <hr id="<?php echo $div_count;?>"> 

在那裏我想刪除

     <?php 
        } 
        $stmt->close(); 
       } 
      } 
      ?> 
     </div> 
    </div> 
</div> 

終點

<div id="messages_modal" class="modal fade" role="dialog"> 
<div class="modal-dialog modal-messages-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title" id="modal_label">Messages 
       <button class="close" data-dismiss="modal">&times;</button> 
      </h4> 
     </div> 
     <div class="modal-body"> 
      <?php 
      $subject = ""; 
      $query = "SELECT id FROM `users` WHERE username=?"; 
      if (!$stmt = $connection->prepare($query)) { 
       echo $stmt->error; 
      } else { 
       if (!$stmt->bind_param('s', $username)) { 
        echo $stmt->error; 
       } else { 
        $stmt->execute(); 
        $stmt->bind_result($recip_id); 
        $stmt->fetch(); 
        $stmt->close(); 
       } 
      } 
      $query = "SELECT username, avatar, conversation_id, conversation_subject, time, msg_seen FROM `users` INNER JOIN `conversation` ON `users`.id = `conversation`.user_1 
          WHERE user_2 = ? ORDER BY time DESC"; 
      if (!$stmt = $connection->prepare($query)) { 
       echo $stmt->error; 
      } else { 
       if (!$stmt->bind_param('i', $recip_id)) { 
        echo $stmt->error; 
       } else { 
        $stmt->execute(); 
        $stmt->bind_result($sender_name, $avatar, $msg_id, $subject, $timestamp, $msg_seen); 
        while ($stmt->fetch()) { 
         $div_count++; 
         if ($msg_seen == 0) { 
          $notification_count++; 
         } 
         $subject = (strlen($subject) > 16) ? substr($subject, 0, 14) . '...' : $subject; 
         ?> 

STARTING POINT我需要刪除的屏幕截圖：

這是我的jQuery。該警告顯示我「msg_delete_btn_2」，這是正確的動態生成的ID，但它僅適用於第二條消息。

$(document).ready(function() { 
    $('#msg_delete_btn_<?php echo $div_count;?>').click(function() { 

     $('#msg_content_<?php echo $div_count;?>').remove(); //<-- REMOVES DIV 
     $('#<?php echo $div_count;?>').remove(); //<-- REMOVES <hr> TAG 
     alert(this.id); //<-- SHOWS ME "msg_delete_btn_2" for 2nd div, which is correct. First div does nothing. 

    }); 
}); 

那麼，如何通過刪除按鈕訪問任何div？我試圖通過創建一個count變量來無效地給出按鈕和div自己的id。

Answer 1

您的問題是一個while的所有迭代後，變量$div_count保持最後的值。

所以，如果你有兩行，你的JS代碼就變成了：

$('#msg_delete_btn_2').click(/* other code */); 

所以，你的代碼一無所知其他msg_delete_btn_按鈕。

簡單的解決方案是使用class相反，你已經擁有它delete-btn，或添加其他類：

$('.delete-btn').click(function() { 
    // remove following hr element which is after closest `div.msg-content` in which this button is 
    $(this).closest(".msg-content").next("hr").remove();   
    // remove closest `div.msg-content` in which this button is 
    $(this).closest(".msg-content").remove(); // remove 

    // first `hr` then `div` because if you first 
    // delete `div` then `hr` WILL NOT BE FOUND 
}); 

更多sopisticated解決方案（如果您的標記會改變）可以是當前$div_count存儲在data使用它的一個按鈕的屬性並生成適當的ids。喜歡的東西：

<button data-id="<?php echo $div_count;?>" class="delete-btn">delete</button> 

$('.delete-btn').click(function() { 
    var itemId = $(this).data("id"); 
    $("msg_content_" + itemId).remove(); 
    // more codes 

Answer 2

試試這個，它應該工作！

$(document).ready(function() { 
    $('.delete-btn').on('click', function() { 
     $(this).closest('.msg-content').next('hr').remove(); //<-- REMOVES <hr> TAG 
     $(this).closest('.msg-content').remove(); //<-- REMOVES DIV 
    }); 
})(); 

Answer 3

使用class和刪除不必要的id標籤。

您可以使用$(this)來定位當前元素和最接近的.msg-content類。

$(document).on('click', '.delete-btn', function(){ 
    $(this).closest('.msg-content').remove(); 
}); 

另一個改進：

不需要有hr標籤，而不是給他們border-bottom:1px solid #d3d3d3;

.msg-content{border:1px solid #d3d3d3;} 
.msg-content:last-child{border:1px solid transparent;} /* Hide border of last element */