JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<button onclick="addRowToForm()">Zeile hinzufügen</button>

<div id="row_template" class="hidden">
  <input name="wert">
  <input name="name">
  <button id="delete_row">X</button>
</div>

<div id="zielform"></div>

CSS

.hidden{
  display: none;
}

JavaScript

var rowCounter = 0;

function addRowToForm() {
  var rowTemplate = document.getElementById("row_template");
  var zielform = document.getElementById("zielform");

  // Erstellt eine tiefe Kopie des row_template-Elements
  var newRow = rowTemplate.cloneNode(true);

  // Entfernt die CSS-Klasse "hidden" von der geklonten Zeile
  newRow.classList.remove("hidden");

  // Aktualisiert die ID des geklonten Elements mit einer fortlaufenden Nummer
  var newRowId = "row_" + rowCounter;
  newRow.setAttribute("id", newRowId);

  // Aktualisiert die ID des Löschbuttons
  var deleteButton = newRow.querySelector("#delete_row");
  deleteButton.setAttribute("onclick", "deleteRow('" + newRowId + "')");

  // Aktualisiert den Namen der Input-Felder mit der row_id
  var inputFields = newRow.querySelectorAll("input");
  inputFields.forEach(function (input) {
    var currentName = input.getAttribute("name");
    var updatedName = currentName + "[" + rowCounter + "]";
    input.setAttribute("name", updatedName);
  });

  // Fügt die geklonte Zeile dem zielform-Element hinzu
  zielform.appendChild(newRow);

  // Erhöht den Zähler für die nächste Zeile
  rowCounter++;
}

function deleteRow(rowId) {
  var row = document.getElementById(rowId);
  if (row) {
    row.remove();
  }
}