2017-03-19 5 views
0

Ich habe einen Bootstrap modal, die sowohl gelesene und ungelesene Nachrichten von einer Datenbank zeigt:Wie verwendet man jQuery .remove() für div, das mit while/fetch in PHP erstellt wurde?

Message Modal

Es eine Benachrichtigung Abzeichen zeigt (siehe oben), wenn ungelesene Nachrichten vorhanden sind. Ich habe eine Schaltfläche zum Löschen hinzugefügt, kann aber nicht herausfinden, wie Sie das gesamte div entfernen, das diese bestimmte Schaltfläche enthält, einschließlich des hr-Tags. Das Problem ist, dass es nur das zweite div- und hr-Tag löscht, das Sie dort sehen, aber nicht das erste. Ich habe sogar einen Alarm eingerichtet und er zeigt mir die richtige Div-ID für die Sekunde. Der erste tut nichts. Das habe ich versucht. Es ist der Code für die gesamte modal 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; 
         ?> 

AUSGANGSPUNKT VON DENEN ICH WILL

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

Endpunkts LÖSCHEN, wo ich will

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

LÖSCHEN Screenshot von dem, was ich brauche gelöscht:

Div needing deleted

Hier ist meine jQuery. Die Warnung zeigt mir "msg_delete_btn_2", was die korrekte dynamisch erzeugte ID ist, aber dies funktioniert nur für die zweite Nachricht.

$(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. 

    }); 
}); 

Also, wie kann ich auf alle div über die Schaltfläche löschen zugreifen? Ich habe versucht, dem Button und dem Div eine eigene ID zu geben, indem ich eine Zählvariable vergeblich erstellt habe.

+0

Sie verwenden PHP HTML zu erstellen. Sie verwenden jQuery, um an der von diesem HTML erstellten Struktur zu arbeiten. Es gibt hier keine Beziehung zwischen PHP und jQuery. – lonesomeday

+0

Ich werde an einer Ajax-Funktion arbeiten, um später aus der Datenbank zu entfernen. Es entfernt die 2. Div, wenn ich auf die Schaltfläche zum Löschen klicken, aber nicht die erste. Wie greife ich das richtige Element, wenn es nur für das zweite funktioniert? – IRGeekSauce

+0

Was ist der Fehler in Ihrer Konsole? – hassan

Antwort

1

Ihr Problem ist, dass, nachdem alle Wiederholungen einer while, variable $div_count den letzten Wert hält.

Also, wenn Sie zwei Reihen haben, Ihre js Code wird:

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

So Ihr Code nichts über andere msg_delete_btn_ Tasten kennt.

Die einfache Lösung ist class stattdessen zu verwenden, können Sie es bereits delete-btn haben oder eine andere Klasse hinzuzufügen:

$('.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 
}); 

Mehr sopisticated Lösung kann (wenn Ihr Markup ändern wird) sein Strom $div_count in ein data zu speichern Attribut einer Schaltfläche und generiere richtig ids mit es. Etwas wie:

<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 
+0

Danke. Ich mag die 2. Lösung. Die erste entfernt das hr-Tag immer noch nicht. Ich werde das Datenattribut ausprobieren (das habe ich bis jetzt noch nie gesehen) und Sie wissen lassen. :-) – IRGeekSauce

+2

Ich habe meinen Code korrigiert. 'hr' bleibt auf der Seite, weil Sie zuerst' div' gelöscht haben. Da 'div' gelöscht wird, kann' hr' nicht gefunden werden. –

+0

Danke! Das hat funktioniert! – IRGeekSauce

1

Versuchen Sie dieses, es sollte funktionieren!

$(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 
    }); 
})(); 
+0

Dang. So nah, aber die hr-Tags bleiben. Ich habe es vorher versucht, aber hatte die falsche Syntax. Danke, dass du mir den richtigen Weg gezeigt hast, es zu benutzen. Ich muss nur das hr-Problem herausfinden. – IRGeekSauce

+0

Vertauschen von Zeilen. Wenn Sie zuerst 'div' löschen, wird' hr' nicht gefunden, da 'div' bereits gelöscht ist. –

+0

@u_mulder ist richtig, es gibt eine funktionierende Demo auf [codepen] (http://codepen.io/niklakhani/pen/yMpEZb) –

1

Verwenden class und entfernen Sie die unnötigen id Tags.

Sie können $(this) verwenden, um das aktuelle Element und die nächste Klasse .msg-content anzusprechen.

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

Eine weitere Verbesserung:

Keine Notwendigkeit hr Tags haben, anstatt geben dem sie eine Art von border-bottom:1px solid #d3d3d3;

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