Aus-einklappen + dynamisch Felder hinzufügen

[DHelm]

Hallo zusammen,




In meinem Code möchte ich dynamisch Felder hinzufügen, welche auch ein und ausklappbar sind - aktuell wird sobald ich auf "löschen" klicke, werden ALLE zuvor hinzugefügten input Felder gelöscht, das soll natürlich nicht so sein, sondern die Felder gelöscht werden bei denen der Löschen-Button geklickt wurde




HTML Code:

<div class="form-row">

<div class="form-group col-md-6">

<label for="inputEmploymentTitle"></label>

<input type="text" name="employmentTitle[]" class="form-control"

id="inputEmploymentTitle" onkeyup="showEmploymentTitle()" placeholder="Titel" />

<span class="border"></span>

</div>

<div class="form-group col-md-6">

<label for="inputEmploymentDauer"></label>

<input type="text" name="employmentDauer[]" class="form-control"

id="inputEmploymentDauer" onkeyup="showEmploymentDauer()" placeholder="Dauer" />

<span class="border"></span>

</div>

<div class="form-group col-md-12">

<label for="inputEmployment"></label>

<textarea type="text" name="employment[]" class="form-control" id="inputEmployment"

onkeyup="showEmployment()" placeholder="mehr Informationen"></textarea>

</div>

</div>

<div class="container1">




</div>

<button class="add_form_field_Employment">hinzufügen</button>







JS Code:

$(document).ready(function () {

var max_fields = 10;

var wrapper = $(".container1");

var add_button = $(".add_form_field_Employment");




var x = 1;

$(add_button).click(function (e) {

e.preventDefault();

if (x < max_fields) {

x++;

$(wrapper).append('<div class="form-row"><div class="form-group col-md-6"><label for="inputEmploymentTitle"></label><input type="text" name="employmentTitle[]" class="form-control" id="inputEmploymentTitle"onkeyup="showEmploymentTi tle()" placeholder="Titel" /><span class="border"></span></div><div class="form-group col-md-6"><label for="inputEmploymentDauer"></label><input type="text" name="employmentDauer[]" class="form-control" id="inputEmploymentDauer"onkeyup="showEmploymentDa uer()" placeholder="Dauer" /><span class="border"></span></div><div class="form-group col-md-12"><label for="inputEmployment"></label><textarea type="text" name="employment[]" class="form-control" id="inputEmployment"onkeyup="showEmployment()" placeholder="mehr Informationen"></textarea></div></div></div><a href="#" class="delete">entfernen</a>'); //add input box

} else {

alert('Maximale Anzahl erreicht')

}

});




$(wrapper).on("click", ".delete", function (e) {

e.preventDefault();

$(this).parent('div').remove();

x--;

})

});

[Christian Marquardt]

IDs müssen in einem HTML-Dokument eindeutig sein. Insofern ist deine Routine zum hinzufügen von Elementen falsch.
Baue dein HTML in dem Wrapper richtig zusammen
Vor den onkeyup muss ein Leerzeichen rein.
Bei showEmploymentTi tle,showEmploymentDa uer sind Leerzeichen drin.
type="text" gibt es nicht in einer Textarea.
Ein /div ist zuviel
Ein label ohne Inhalt