Javascript-forum
Aus-einklappen + dynamisch Felder hinzufügen - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Aus-einklappen + dynamisch Felder hinzufügen (/showthread.php?tid=1832)



Aus-einklappen + dynamisch Felder hinzufügen - DHelm - 18.11.2022

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="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>'); //add input box
            } else {
                alert('Maximale Anzahl erreicht')
            }
        });

        $(wrapper).on("click", ".delete", function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });


RE: Aus-einklappen + dynamisch Felder hinzufügen - rzscout - 18.11.2022

Hi DHELM,
hier ein von mir erstellter Code-Schnipsel. Ich verwende dort kein jQuery und um auch alle Elemente im DOM zu haben verwende ich die appendChild-Methode.

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>

Viel Erfolg

rzscout