✔ Button wird verzögert entfernt, warum?

X

XoR_1337

Mitglied
Guten Abend allerseits.

Hocke schon seit geraumer Zeit an meinem Problem und selbst Google konnte mir bei der Lösung nicht weiterhelfen.
Anmerken muss ich, dass ich erst seit kurzem an JS dran bin und daher noch nicht so erfahren bin.
Nun zum Eigentlichen:

Ich habe einen Button erstellt, der beim drücken eine funktion auslöst, die ein kleines "formular" erstellt(war nur für mich zum ausprobieren). Mein Problem ist nun, dass der Button nicht wie gewollt beim ersten, sondern beim 2ten Drücken entfernt wird... warum?

Hier mein Script:

Code: 
<html>
<head>
	<title>JS</title>
	<script type="text/javascript">
		function init()
		{
			var basis = document.getElementById("basis");
			var button = document.createElement("input");
			
			button.setAttribute("type", "button");
			button.setAttribute("value", "Formular oeffnen");
			button.setAttribute("onclick", "formular();");
			
			basis.appendChild(button);
		}
		
		function formular()
		{
			
			var basis = document.getElementById("basis");
			var div = document.createElement("div");
			var br = document.createElement("br");
			var vorname = document.createTextNode("Vorname: ");
			var nachname = document.createTextNode("Nachname: ");
			var eingabe1 = document.createElement("input");
			var eingabe2 = document.createElement("input");
			
			eingabe1.setAttribute("type", "text");
			eingabe2.setAttribute("type", "text");
			
			basis.appendChild(div);
			div.appendChild(br);
			div.appendChild(br);
			div.appendChild(vorname);
			div.appendChild(eingabe1);
			div.appendChild(br);
			div.appendChild(nachname);
			div.appendChild(eingabe2);
			
			var loeschen = document.getElementsByTagName("body")[0].firstChild;
			basis.removeChild(loeschen);
		}
	</script>
</head>
<body id = "basis" onload="init();">
</body>
</html>

P.S.:
Habe auch basis.removeNode(false); probiert, dies hat gar nicht funktioniert, wäre schön, wenn mir auch hierzu einer sagen könnte, warum.

Ich danke Allen schon mal im Vorraus


MFG

XoR_1337
 
Weil firstChild nicht zwangsläufig das ist, was du erwartest. Auch whitespace (Leerzeichen,Tab, Zeilenumbruch etc.) sind Knoten im DOM. Du solltest also anstelle von firstChild wirklich den Button nehmen. Z.B.

Javascript: 
function init()
{
	var basis = document.getElementById("basis");
	var button = document.createElement("input");
	
	button.setAttribute("type", "button");
	button.setAttribute("value", "Formular oeffnen");
	button.setAttribute("onclick", "formular(this);");
	
	basis.appendChild(button);
}

function formular(button)
{
	
	var basis = document.getElementById("basis");
	var div = document.createElement("div");
	var br = document.createElement("br");
	var vorname = document.createTextNode("Vorname: ");
	var nachname = document.createTextNode("Nachname: ");
	var eingabe1 = document.createElement("input");
	var eingabe2 = document.createElement("input");
	
	eingabe1.setAttribute("type", "text");
	eingabe2.setAttribute("type", "text");
	
	basis.appendChild(div);
	div.appendChild(br);
	div.appendChild(br);
	div.appendChild(vorname);
	div.appendChild(eingabe1);
	div.appendChild(br);
	div.appendChild(nachname);
	div.appendChild(eingabe2);
	
	basis.removeChild(button);
}
 
Ahja, danke dir vielmals, hatte keine Ahnung dass Leerzeichen usw. auch als Knoten zählen.
Doch habe gleich anschließend ein weiteres Problem, denn die Zeilenumbrüche (br) funktionieren ebenfalls nicht.

Zudem sehe ich gerade, dass ich mich bei meinem ersten Post verschrieben habe, ich meinte nicht basis.removeNode(false); sondern natürlich button.removeNode(false); anders ergäbe es ja auch keinen Sinn :p
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück