[Gelöst] jQuery - Entfernen eines Divs mit allem Inhalt
Hallo Zusammen,
ich probiere gerade mit JQuery ein div und den ganzen Content in dem div aus dem DOM zu entfernen.
Und zwar so.
$('.delete').click(function (e) {
var hisParent = $(this).parent('div');
hisParent.empty();
hisParent.remove();
});
empty sollte laut Docu eigentlich alle Childs entfernen. Wenn ich es jetzt richtig sehe werden aber nur die Childs vom Type div entfernt.
Es sind auch Elemente ohne Id enthalten und von Unterschiedlichen Typen.
Grundlegend handelt ist sich um eine Liste mit Komplexeren Elementen. In die man Elemente hinzufügen und entfernen können soll (Kann man sich grob als AdressListe vorstellen (Straße, Ort usw.)). Jedes Element hat seinen eigenen Delete Button.
Sollte man mal gelesen haben:
Hallo,
$(this).parent('div').remove(); sollte den entsprechenden div aus dem DOM entfernen. Was funktioniert denn nicht?
Das Div wird auch aus dem DOM gelöscht, nur nicht alle Childs.
Um es grob darzustellen.
So sieht es vorher aus-
<div class="parent">
<input class="ui-btn delete" type="button" value="Löschen">
<div>
<input id="Facher_0__ID" type="hidden" value="1" name="Facher[0].ID">
<div class="ui-input-text ">
<label >Nummer:</label>
<input id="Facher_0__Name" type="text" value="1" name="Facher[0].Name">
</div>
</div>
</div>
Und so nachher.
<input class="ui-btn delete" type="button" value="Löschen">
<input id="Facher_0__ID" type="hidden" value="1" name="Facher[0].ID">
<label >Nummer:</label>
<input id="Facher_0__Name" type="text" value="1" name="Facher[0].Name">
Die DIVs sind alle verschwunden, aber Label, Button .u.s.w. sind noch da.
Sollte man mal gelesen haben:
Hmm, ich kann dein Problem nicht reproduzieren. Wenn ich folgendes ausführe, wird der komplette div aus dem DOM entfernt:
<html>
<body>
<div class="parent">
<input class="ui-btn delete" type="button" value="Löschen">
<div>
<input id="Facher_0__ID" type="hidden" value="1" name="Facher[0].ID">
<div class="ui-input-text ">
<label >Nummer:</label>
<input id="Facher_0__Name" type="text" value="1" name="Facher[0].Name">
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".delete").click(function(){
$(this).parent().remove();
});
});
</script>
</body>
</html>
Das bezweifle ich stark, denn bei einem remove() werden alle Childs ebenfalls entfernt.
Es gibt keine Standard-Möglichkeit, dass man ein Element entfernt und die Childs behält.
Sicher, dass Du die richtige DIV-Struktur erwischt hast und es auch keine Tag-Schema-Fehler gibt?
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
Ich hab jetzt mal im FF ein Screenshot des DOM gemacht. Einmal vorher und einmal nachher.
Die bei den Unteren DIVs enthalten noch mal den gleichen Inhalt, wie das Aufgeklappte.
Sollte man mal gelesen haben:
Für mich sieht, es jetzt schon so aus als ob, das passende DIV entfernt worden wäre. Nur nicht die Inhalte.
Was vielleicht noch interessant ist. Ich verwende HTML.EditorFor und ein Template.
Sollte man mal gelesen haben:
Ok so funktioniert es jetzt.
hisParent.remove('div','imput','label');
Wie so remove() jetzt nicht klappt, ist mir trotzdem ein Rätsel.
Sollte man mal gelesen haben:
Davon abgesehen, dass der Fehler komisch ist, ist Dein Vorhaben potenziell nicht valide.
Du löschst hier ein Element aus einer FormCollection.
Das Problem, das Du haben wirst ist aber, dass Du nicht so ohne weiteres einen Index in einer FormCollection überspringen kannst.
Sprich Faecher_ID_0 zu löschen, während Faecher_ID_1 existiert, kann und wird beim Submit Probleme machen.
IIRC, dass es besonders beim IE9 Probleme gemacht hat.
Deswegen arbeitet zB der MvcHelper hier mit Guids.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
Das Problem ist mir schon bekannt und ich wollte und ich wollte es eigentlich lösen indem ich im nächsten schritt über die Elemente laufe und sie durchnummeriere.
Was ich eigentlich machen möchte entspricht dem (Wobei es nur ein Element, des View ist und ich nur am ende speichern muss).
Steven Sanderson's blog: Editing a variable length list, ASP.NET MVC 2-style
Dabei gefällt mir das BeginCollectionItem Methode nicht so gut.
Die Variante, es Clientseitig mit JavaScript so lösen hat mir noch am besten gefallen.
Wenn du eine bessere Lösung kennst es mit MVC3 (Ja ist jetzt nicht ganz aktuell) und JQuery umzusetzen würde ich mich freuen.
(Eleganter wäre es sicher mit Angular, hier muss halt geschaut werden wie hoch der Aufwand der Umstellung ist und der Einarbeitungsaufwand ist. Das wollten wir Anfang nächsten Jahren machen, da es ja bei ASP auch noch ein paar Änedrungen geben soll und man dann vielleicht weiß wie weit Angular2 ist)
Sollte man mal gelesen haben:
Mit Guids gibts das Problem auch nicht - und mit modernen Ansätzen wie AngularJS bzw. DataBinding sowieso nicht mehr.
Ist halt eines der vielen Nachteile von MVC um Gegensatz zu den neuesten Technologien, auch wenn MVC natürlich für viele Sachen immer noch State-of-the-Art ist.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code