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.
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) .
Zur Anmerkung, wenn ich das Entfernen außerhalb der Call-Back-Funkton setzten
Beispiele 1 - Nach der Animation
oder Beispiel 2,
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
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();
Würde mich über ein Feedbck freuen.
Beste Grüße