JQuery - Problem das letzte Kindelement mit remove() zu löschen, nach Animation

Davicito

Erfahrenes Mitglied
Hallo liebes Community,

ich versuche nun schon ne lange Zeit, aus einem Elternelement (DOM/HTML) - mittels JQuery - das lestze Kindelement mit "remove()" zu entfernen, sobald eine Animation "animate()" abgeschlossen ist.

Das Problem ist, das durch "remove()" nicht nur das letzte direkte Kindelement von "div#user-days" entfernt wird, sondern eben alle seiner Kinder.

Folgende HTML-Struktur liegt zu Grunde.
HTML:
<div id="user-days">
    <div id="week" style="...">
          <div id="day">Mo.</div>
          <div id="day">Mo.</div>
          <div id="day">Mo.</div>
           ...
    </div>
   <div id="week">...</div>
   <div id="week">...</div>
   <div id="week">...</div>
</div>
<div id="user-days">...</div>
<div id="user-days">...</div>
....

Hier ist mein JavaScript-Teil mit JQuery.
Nach einem Ajax-Request, füge ich mit einer Map-funktion zuerst eine Woche "<div id="week">...</div>" in jedes "<div id="#user-days">...<div>" -Elternelement ein.
und anschließend wird mit "animate()" die eingefügte Woche nach rechts verschoben, um diese sichtbar zu machen. Dabei wird die letzte Woche ebenfalls nach rechts, aus dem Bildschriemrand verschoben - welche dann ebend aus dem DOM gelöscht sein soll (aus Performance-Gründen, den Browser-Cache nicht zu überfüllen) .
Javascript:
....
$('#prev-button').on('click', function(e){
     e.preventDefault();  
     $.ajax({
                type: 'POST',
                url: '/planning/ajax/getCalendarWeek',                
     }).done(function(data, status, xhr){
            var weekDatas = JSON.parse(data);                    
            
            // add week content of planning datas to the calendar view / 
            $.map(weekDatas, function(key, index){
                        $('#planning-content > #'+key.u_id).find('#user-days').prepend(key.weekDays);                        
     });    
 
     // After inserting the week on left side, animate the canendar view to move them visable  and after finishing the animation remove the last week from DOM
     $(document).find('#user-days > div#week')
       .stop()
       .animate({left: ($('div#week').width()+10)}, 
                       700, 
                       function() {                                         
                              $(this).last().remove();                                                                             
                       }
        );

Zur Anmerkung, wenn ich das Entfernen außerhalb der Call-Back-Funkton setzten

Beispiele 1 - Nach der Animation
Javascript:
      $(document).find('#user-days > div#week')
         .stop()
         .animate({left: ($('div#week').width()+10)}, 
                       700               
         );

     $(document).find('div#user-days > div#week:last-child').remove();

oder Beispiel 2,
Javascript:
 $(document).find('#user-days > div#week')
       .stop()
       .animate({left: ($('div#week').width()+10)}, 
                       700                      
        ).parent().find('div#week:last-child').remove();
werden die letzten direkten Kindelemente von 'div#user-days' entfern, nur dann wären die Elemente zu erst gelöscht (sichtbar verschwunden) bevor die Animation ausgeführt wurde.


Würde mich über ein Feedbck freuen.

Beste Grüße
 

Sempervivum

Erfahrenes Mitglied
Hallo Davicito,
zunächst mal muss eine ID documentweit eindeutig sein und darf nicht mehrfach vergeben werden. Ändere das zunächst Mal in Klassen.
 

Davicito

Erfahrenes Mitglied
Hallo Semprevivum,

sorry ja da hast du natürlich recht. Hab das nun als Klasse abgeändert.
Das hat aber mein Problem noch nicht gelößt.
 

Sempervivum

Erfahrenes Mitglied
Fällt mir ein wenig schwer, mir das vorzustellen, wie es funktioniert und aussieht. Hast Du es vielleicht online?
 

Sempervivum

Erfahrenes Mitglied
PS: Habe doch eine Idee, wenn ich mir dieses Javascript ansehe:
Code:
$(document).find('#user-days > div#week')
       .stop()
       .animate({left: ($('div#week').width()+10)},
                       700                     
        ).parent().find('div#week:last-child').remove();
Das wird ja für alle div#week ausgeführt und entsprechend wird auch nach dem Ende der Animation jedes Mal das Löschen ausgeführt.
 

Davicito

Erfahrenes Mitglied
Leider hab ich das nicht online zugänglich

Code:
$(document).find('#user-days > div#week')
       .stop()
       .animate({left: ($('div#week').width()+10)},
                       700                    
        ).parent().find('div#week:last-child').remove();

Der Code befindet sich außerhalb der Map-Loop und wird nur einmal ausgeführt.
So wie der Code oben zu sehen ist, funktioniert es ja... nur wenn er in der Call-Back in "animate()" stünde, wird alles was "#week" ist, gelöscht
Code:
$(document).find('#user-days > div#week')
       .stop()
       .animate({left: ($('div#week').width()+10)},
                       700         
                       function() {
                            $('#planning-content  div#user-days > div#week:last-child').remove();
                            //$(this).last().remove();                                 
                       }
        );
 

Davicito

Erfahrenes Mitglied
Ja... um keine Verwirrung zu stiften, habe ich die Rauten in den obigen Beispiel-Codes stehen lassen.
Im original Code habe ich die durch Punkte ersetzt
HTML:
<div class="user-days">
    <div class="week" style="...">
          <div class="day">Mo.</div>
          <div class="day">Di.</div>
          <div class="day">Mi.</div>
           ...
    </div>
   <div class="week">...</div>
   <div class="week">...</div>
   <div class="week">...</div>
</div>
<div class="user-days">...</div>
<div class="user-days">...</div>
....

Javascript:
$('#prev-button').on('click', function(e){
     e.preventDefault();  
     $.ajax({
                type: 'POST',
                url: '/planning/ajax/getCalendarWeek',                
     }).done(function(data, status, xhr){
            var weekDatas = JSON.parse(data);                    
            
            // add week content of planning datas to the calendar view / 
            $.map(weekDatas, function(key, index){
                        $('#planning-content > #'+key.u_id).find('.user-days').prepend(key.weekDays);                        
     });    
 
// After inserting the week on left side, animate the canendar view to move them visable  and after finishing the animation remove the last week from DOM
     $(document).find('.user-days > div.week')
       .stop()
       .animate({left: ($('div.week').width()+10)}, 
                       700, 
                       function() {                                         
                              $(this).last().remove();                                                                             
                       }
        );
 

Sempervivum

Erfahrenes Mitglied
Der Code befindet sich außerhalb der Map-Loop und wird nur einmal ausgeführt.
Da bin ich mir nicht so sicher, bau da mal ein console.log ein:
Code:
     // After inserting the week on left side, animate the canendar view to move them visable  and after finishing the animation remove the last week from DOM
     $(document).find('.user-days > div.week')
       .stop()
       .animate({left: ($('div.week').width()+10)},
                       700,
                       function() {
                              console.log('callback for animation end');
                              $(this).last().remove();                                                                             
                       }
        );