Javascript: dynamisch erzeugte Zeilen .. letzte Zeile wieder löschen?

ExkoSven · 05.05.2021

Hallo zusammen,
ich habe folgendes Problem:

Code:

<body>
    <form id="myform">
    </form>
    <input type="button" onClick="addField();" value="Zeile einfuegen"> 
    <input type="button" onClick="removeField();" value="letzte Zeile loeschen"> 
    <p id="ausgabe"></p>
</body>
</html>

<script type="text/javascript">
var i = 1;
    function addField(){
       
        var divbox = document.createElement("div");
        divbox.setAttribute("id","bla" + i);
        var myBox = document.createElement("input");
        myBox.setAttribute("name","blabla" + i);
        divbox.appendChild(myBox);
        var currentForm = document.getElementById("myform");
        currentForm.appendChild(divbox);
        document.getElementById("ausgabe").innerHTML = i;
        i++;
        }

    function removeField(){
        var loeschen = document.getElementById("bla" + i);
        i--;
        }
</script>

Ich möchte die letzte Zeile, die ich eingefügt habe, wieder löschen.
Was muss ich in der Funktion removeField tun?

Gruss
Sven

lachender_engel · 05.05.2021

Zuerst solltest Du dem zu löschenden Element, bei der Erstellung, eine eindeutige Zuordnung geben, z.B. ein ID oder zumindest eine Klasse.
Wir nehmen an die id lautet loesch_mich_wieder. Dann sieht der Code so aus:

Code:

var loeschen = document.getElementById("loesch_mich_wieder");
loeschen.remove();

ExkoSven · 05.05.2021

Hab meinen Gedankenfehler gefunden.

Code:

    function removeField(){
        i--;
        var loeschen = document.getElementById("bla" + i);
        loeschen.remove();
        }

da ich i bei der addField hochzähle, hatte ich immer i eins zu hoch.

Nach Umplatzierung von i--; klappt es jetzt.

Danke trotzdem für den Hinweis wegen remove().

Gruss Sven