PHPでwhile/fetchを使用して作成したdivにjQueryの.remove（）を使用する方法は？

Question

私は、データベースから読むと、未読メッセージの両方を表示するブートストラップモーダル持つ：

を未読のメッセージがある場合は（上を参照）通知バッジが表示されます。私は削除ボタンを追加しましたが、hrタグを含む特定のボタンを含むdiv全体を削除する方法を理解することはできません。問題は、最初に表示されていないdivタグとhrタグだけを削除することです。私は警告を設定しても、それは私に2番目の正しいdiv idを示しています。最初は何もしません。これが私が試みたものです。これは、全体モーダルdivのためのコードです：私は

     <?php 
        } 
        $stmt->close(); 
       } 
      } 
      ?> 
     </div> 
    </div> 
</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;?>"> 

を削除したい場所の

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

出発点削除が必要なスクリーンショット：

ここは私のjQueryです。アラートは、 "msg_delete_btn_2"を表示します。これは、動的に生成された正しいIDですが、これは2番目のメッセージでのみ機能します。

$(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に自分のidを与えようとしました。

Answer 1

あなたの問題はwhileのすべての反復した後、変数$div_countは最後の値を保持していることです。

あなたは2つの行を持っているのであれば、あなたの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ソリューションdataで現在$div_countを格納することができます属性を使用して、適切な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(); 
}); 

別の改善：

代わりに、彼らにあなたがHTMLを作成するためにPHPを使用しているborder-bottom:1px solid #d3d3d3;

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