chrizz hat geschrieben:<input0>Text</input>
<input1>Text 2</input>
<input2>Text 3</input>
<input3></input>
[…]
Wenn ich den Text aus Input2 lösche, dann soll (also "Text 3"), dann soll dass Input3 verschwinden, weil ja Input 2 leer ist...
Und wenn Input1 geleert wird, würde dann Input2, mitsamt seinem Inhalt, verschwinden? Sollte nicht eher das geleerte Element selbst entfernt werden?
Kannst es mal mit nachfolgendem probieren, ich hab's allerdings nur schnell zusammengestrickt. Der Code verlässt sich darauf, dass die Elemente pro Zeile einzeln vorliegen, d.h. eine Zeile darf nicht aus zum Beispiel den zwei Elementen <input><br> bestehen. Um die <input>-Elemente trotzdem zeilenweise darzustellen, stecken sie in einer <ul>-Liste (ließe sich aber auch mittels CSS lösen). <li><input> sind auch zwei Elemente? Nicht ganz, bearbeitet wird hier nicht das <input>-Element, sondern das <li>-Element, daher auch die Aufrufe von o.parentNode.parentNode.append-/removeChild(), parentNode.parentNode ist die <ul>-Liste.
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
var bla = 4; // Zähler für <input>-Namen
function nocheiner(o) {
var nachbar = o.parentNode;
while ((nachbar = nachbar.nextSibling) && (nachbar.nodeType != 1)) { // nächsten echten Nachbarn finden, d.h. <x>-Elemente, keine einfachen Textknoten
}
if ((o.value == "") && (nachbar)) { // Feld wurde geleert und ist nicht letztes: Dieses löschen.
o.parentNode.parentNode.removeChild(o.parentNode);
}
else if ((o.value != "") && (!nachbar)) { // Feld nicht leer und ist letztes: Neues anhängen.
var input = document.createElement("input");
input.type = "text";
input.name = "bla" + bla;
bla++;
input.setAttribute("onBlur", "nocheiner(this);");
var li = document.createElement("li");
li.appendChild(input);
o.parentNode.parentNode.appendChild(li);
}
}
</script>
</head>
<body>
<ul>
<li><input type="text" name="bla1" value="blo" onblur="nocheiner(this)"></li>
<li><input type="text" name="bla2" value="bli" onblur="nocheiner(this)"></li>
<li><input type="text" name="bla3" value="" onblur="nocheiner(this)"></li>
</ul>
</body>
</html>
