Javascript-forum › Entwicklung › Javascript v
Aus-einklappen + dynamisch Felder hinzufügen

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Linearer Modus
Aus-einklappen + dynamisch Felder hinzufügen
DHelm
Unregistered
 
#1
18.11.2022, 09:44
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:


Code:
[color=#808080]<[/color][color=#569cd6]div[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-row"[/color][color=#808080]>[/color]
                                [color=#808080]<[/color][color=#569cd6]div[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-group col-md-6"[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]label[/color] [color=#9cdcfe]for[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmploymentTitle"[/color][color=#808080]></[/color][color=#569cd6]label[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]input[/color] [color=#9cdcfe]type[/color][color=#d4d4d4]=[/color][color=#ce9178]"text"[/color] [color=#9cdcfe]name[/color][color=#d4d4d4]=[/color][color=#ce9178]"employmentTitle[]"[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-control"[/color]
                                        [color=#9cdcfe]id[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmploymentTitle"[/color] [color=#9cdcfe]onkeyup[/color][color=#d4d4d4]=[/color][color=#ce9178]"[/color][color=#dcdcaa]showEmploymentTitle[/color][color=#ce9178]()[/color][color=#ce9178]"[/color] [color=#9cdcfe]placeholder[/color][color=#d4d4d4]=[/color][color=#ce9178]"Titel"[/color] [color=#808080]/>[/color]
                                    [color=#808080]<[/color][color=#569cd6]span[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"border"[/color][color=#808080]></[/color][color=#569cd6]span[/color][color=#808080]>[/color]
                                [color=#808080]</[/color][color=#569cd6]div[/color][color=#808080]>[/color]
                                [color=#808080]<[/color][color=#569cd6]div[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-group col-md-6"[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]label[/color] [color=#9cdcfe]for[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmploymentDauer"[/color][color=#808080]></[/color][color=#569cd6]label[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]input[/color] [color=#9cdcfe]type[/color][color=#d4d4d4]=[/color][color=#ce9178]"text"[/color] [color=#9cdcfe]name[/color][color=#d4d4d4]=[/color][color=#ce9178]"employmentDauer[]"[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-control"[/color]
                                        [color=#9cdcfe]id[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmploymentDauer"[/color] [color=#9cdcfe]onkeyup[/color][color=#d4d4d4]=[/color][color=#ce9178]"[/color][color=#dcdcaa]showEmploymentDauer[/color][color=#ce9178]()[/color][color=#ce9178]"[/color] [color=#9cdcfe]placeholder[/color][color=#d4d4d4]=[/color][color=#ce9178]"Dauer"[/color] [color=#808080]/>[/color]
                                    [color=#808080]<[/color][color=#569cd6]span[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"border"[/color][color=#808080]></[/color][color=#569cd6]span[/color][color=#808080]>[/color]
                                [color=#808080]</[/color][color=#569cd6]div[/color][color=#808080]>[/color]
                                [color=#808080]<[/color][color=#569cd6]div[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-group col-md-12"[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]label[/color] [color=#9cdcfe]for[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmployment"[/color][color=#808080]></[/color][color=#569cd6]label[/color][color=#808080]>[/color]
                                    [color=#808080]<[/color][color=#569cd6]textarea[/color] [color=#9cdcfe]type[/color][color=#d4d4d4]=[/color][color=#ce9178]"text"[/color] [color=#9cdcfe]name[/color][color=#d4d4d4]=[/color][color=#ce9178]"employment[]"[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"form-control"[/color] [color=#9cdcfe]id[/color][color=#d4d4d4]=[/color][color=#ce9178]"inputEmployment"[/color]
                                        [color=#9cdcfe]onkeyup[/color][color=#d4d4d4]=[/color][color=#ce9178]"[/color][color=#dcdcaa]showEmployment[/color][color=#ce9178]()[/color][color=#ce9178]"[/color] [color=#9cdcfe]placeholder[/color][color=#d4d4d4]=[/color][color=#ce9178]"mehr Informationen"[/color][color=#808080]></[/color][color=#569cd6]textarea[/color][color=#808080]>[/color]
                                [color=#808080]</[/color][color=#569cd6]div[/color][color=#808080]>[/color]
                            [color=#808080]</[/color][color=#569cd6]div[/color][color=#808080]>[/color]
                            [color=#808080]<[/color][color=#569cd6]div[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"container1"[/color][color=#808080]>[/color]

                            [color=#808080]</[/color][color=#569cd6]div[/color][color=#808080]>[/color]
                        [color=#808080]<[/color][color=#569cd6]button[/color] [color=#9cdcfe]class[/color][color=#d4d4d4]=[/color][color=#ce9178]"add_form_field_Employment"[/color][color=#808080]>[/color][color=#d4d4d4]hinzufügen[/color][color=#808080]</[/color][color=#569cd6]button[/color][color=#808080]>[/color]


JSCode:

Code:
[color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#9cdcfe]document[/color][color=#d4d4d4]).[/color][color=#dcdcaa]ready[/color][color=#d4d4d4]([/color][color=#569cd6]function[/color][color=#d4d4d4] () {[/color]
        [color=#569cd6]var[/color] [color=#9cdcfe]max_fields[/color][color=#d4d4d4] = [/color][color=#b5cea8]10[/color][color=#d4d4d4];[/color]
        [color=#569cd6]var[/color] [color=#9cdcfe]wrapper[/color][color=#d4d4d4] = [/color][color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#ce9178]".container1"[/color][color=#d4d4d4]);[/color]
        [color=#569cd6]var[/color] [color=#9cdcfe]add_button[/color][color=#d4d4d4] = [/color][color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#ce9178]".add_form_field_Employment"[/color][color=#d4d4d4]);[/color]

        [color=#569cd6]var[/color] [color=#9cdcfe]x[/color][color=#d4d4d4] = [/color][color=#b5cea8]1[/color][color=#d4d4d4];[/color]
        [color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#9cdcfe]add_button[/color][color=#d4d4d4]).[/color][color=#dcdcaa]click[/color][color=#d4d4d4]([/color][color=#569cd6]function[/color][color=#d4d4d4] ([/color][color=#9cdcfe]e[/color][color=#d4d4d4]) {[/color]
            [color=#9cdcfe]e[/color][color=#d4d4d4].[/color][color=#dcdcaa]preventDefault[/color][color=#d4d4d4]();[/color]
            [color=#c586c0]if[/color][color=#d4d4d4] ([/color][color=#9cdcfe]x[/color][color=#d4d4d4] < [/color][color=#9cdcfe]max_fields[/color][color=#d4d4d4]) {[/color]
                [color=#9cdcfe]x[/color][color=#d4d4d4]++;[/color]
                [color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#9cdcfe]wrapper[/color][color=#d4d4d4]).[/color][color=#dcdcaa]append[/color][color=#d4d4d4]([/color][color=#ce9178]'<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><a href="#" class="delete">entfernen</a>'[/color][color=#d4d4d4]); [/color][color=#6a9955]//add input box[/color]
[color=#d4d4d4]            } [/color][color=#c586c0]else[/color][color=#d4d4d4] {[/color]
                [color=#dcdcaa]alert[/color][color=#d4d4d4]([/color][color=#ce9178]'Maximale Anzahl erreicht'[/color][color=#d4d4d4])[/color]
[color=#d4d4d4]            }[/color]
[color=#d4d4d4]        });[/color]

        [color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#9cdcfe]wrapper[/color][color=#d4d4d4]).[/color][color=#dcdcaa]on[/color][color=#d4d4d4]([/color][color=#ce9178]"click"[/color][color=#d4d4d4], [/color][color=#ce9178]".delete"[/color][color=#d4d4d4], [/color][color=#569cd6]function[/color][color=#d4d4d4] ([/color][color=#9cdcfe]e[/color][color=#d4d4d4]) {[/color]
            [color=#9cdcfe]e[/color][color=#d4d4d4].[/color][color=#dcdcaa]preventDefault[/color][color=#d4d4d4]();[/color]
            [color=#dcdcaa]$[/color][color=#d4d4d4]([/color][color=#569cd6]this[/color][color=#d4d4d4]).[/color][color=#dcdcaa]parent[/color][color=#d4d4d4]([/color][color=#ce9178]'div'[/color][color=#d4d4d4]).[/color][color=#dcdcaa]remove[/color][color=#d4d4d4]();[/color]
            [color=#9cdcfe]x[/color][color=#d4d4d4]--;[/color]
[color=#d4d4d4]        })[/color]
[color=#d4d4d4]    });[/color]
Zitieren


Nachrichten in diesem Thema
Aus-einklappen + dynamisch Felder hinzufügen - von DHelm - 18.11.2022, 09:44

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste