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

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
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
admin Offline
Administrator
*******
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung: 14
#2
22.11.2022, 01:57
Kannst du den Code nochmal posten ?
Bitte erklär mir auch wie du den Code gepostet hast , weil das kam schon öfters vor das der Code so Scheiße angezeigt wird , nur weiß ich leider nicht wie das passiert und was du anders gemacht hast beim Code posten, wie die anderen?
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Suchen Bewerten
Zitieren
rzscout Offline
Administrator
*******
Beiträge: 306
Themen: 14
Registriert seit: Jun 2022
Bewertung: 26
#3
22.11.2022, 14:45
Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamische Felder</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #fieldlist {
            width: 420px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        #fieldlist .field {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            margin-bottom: 24px;
        }
        #fieldlist .field .field_title {
            margin-bottom: 6px;
            width: 360px;
        }
        #fieldlist .field .field_time {
            margin-bottom: 6px;
            width: 360px;
        }
        #fieldlist .field .field_info {
            margin-bottom: 6px;
            width: 400px;
        }
    </style>
    <script>
        'use strict';
        var btn_add, fieldlist;
        document.addEventListener('DOMContentLoaded', init);
        function init() {
            fieldlist = document.querySelector('#fieldlist');
            btn_add = document.querySelector('.btn_add');
            btn_add.addEventListener('click', function() {
                let field = document.createElement('div');
                field.classList.add('field');
                fieldlist.appendChild(field);
                // Titelelement hinzufügen und Placeholder, Type und CSS-Klassen zuweisen
                let fieldTitle = document.createElement('input');
                fieldTitle.classList.add('field_title');
                fieldTitle.setAttribute('placeholder', 'Titel');
                fieldTitle.setAttribute('type', 'text');
                field.appendChild(fieldTitle);
                // Dauer-Element erstellen
                let fieldTime = document.createElement('input');
                fieldTime.setAttribute('type', 'text');
                fieldTime.classList.add('field_time');
                fieldTime.setAttribute('placeholder', 'Dauer');
                field.appendChild(fieldTime);
                // Feldinformationen erstellen und hinzufügen
                let fieldInfo = document.createElement('textarea');
                fieldInfo.classList.add('field_info');
                fieldInfo.setAttribute('placeholder', 'Mehr Informationen...');
                field.appendChild(fieldInfo);
                // Löschbuttun hinzufügen
                let btnDel = document.createElement('button');
                btnDel.textContent = "löschen";
                btnDel.classList.add('btn_del');
                field.appendChild(btnDel);
                // Löschbutton EvenListener zuweisen und Methoden reinschreiben
                btnDel.addEventListener('click', ()=> {
                    // Selektiere Elternelement vom Entfernen-Button
                    let btnParent = btnDel.parentElement;
                    // Entferne alle Elemente aus dem Elternelement
                    // Das ist wichtig damit sowohl Speicher als auch DOM geleert wird
                    while (btnParent.firstChild) {
                        btnParent.removeChild(btnParent.firstChild);
                    }
                    // Entferne Elternelement direkt
                    btnParent.remove();
                });
            });
        }
    </script>   
</head>
<body>
    <div id="fieldlist">
        <div class="field">
            <input type="text" class="field_title" placeholder="Titel">
            <input type="text" class="field_time" placeholder="Dauer">
            <textarea class="field_info" placeholder="Mehr Informationen..."></textarea>           
        </div>
    </div>
    <button class="btn_add">hinzufügen</button>
</body>
</html>
Versuche es mit dem
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Suchen Bewerten
Zitieren


Gehe zu:


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