Javascript-forum

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--;
})
});

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

DHelm

rzscout