Dynamisch Optionen bei Umfrage hinzufügen

[john]

Hallo.
Ich möchte meiner Seite ein Umfrage Gadget hinzufügen.
Dazu soll man dynamisch Optionen hinzufügen und entfernen können-

Mein Ansatz sieht so aus:

  
<a href='javascript:;' onclick=''>Option hinzufügen</a>  
<ul id='poll_options'>  
<li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li>  
<li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li>  
</ul>

Wie müssen die Javascript-Codes aussehen in den Links für hinzufügen und entfernen?
Ich möchte wenn ich auf "hinzufügen" klicke, das <li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li>
unten hinzugefügt wird.
Bei Löschen wird das entsprechende gelöscht.

Lg, John

[suit]

<a href='javascript:;' onclick=''>Option hinzufügen</a>
<ul id='poll_options'>
<li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li>
<li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li>
</ul>

>   
> Wie müssen die Javascript-Codes aussehen in den Links für hinzufügen und entfernen?  
  
Unterschiedlich.  
  
Der zum Entfernen muss ansich nur sein (this) Elternelement (<http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=parentNode>) aus dessen Elternelement (parentNode oder getElementById) aus dem DOM entfernen (<http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=removeChild>)  
  

> Ich möchte wenn ich auf "hinzufügen" klicke, das <li><input type='text' name='polloptions[]' /> <a href='javascript:;' onclick=''>Löschen</a></li> unten hinzugefügt wird.  
  
Da lasse ich dich selbst nachdenken.  
  

> Bei Löschen wird das entsprechende gelöscht.  
  
Das solltest du bereits umsetzen können.

[JOHN]

Der zum Entfernen muss ansich nur sein (this) Elternelement (http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=parentNode) aus dessen Elternelement (parentNode oder getElementById) aus dem DOM entfernen (http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=removeChild)

Danke. Ich verstehe aber nicht warum das hier nicht klappt:
<li><input type="text" name="polloptions[]" /> <a href="javascript:;" onclick="document.getElementById(\'pollgadget\').removeChild(this.parentNode);">Löschen</a></li>

Weil:
document.getElementById('pollgadget').removeChild(this.parentNode);

Nimmt sich doch die Liste und entfernt das Kind und dieses Kind spreche mit parentNode des Links an =/. Funktioniert nicht.
Konsole sagt:
Fehler: uncaught exception: [Exception... "Node was not found"  code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"  location: "http://exmaple.com/... Line: 1"]

[suit]

<li><input type="text" name="polloptions[]" /> <a href="javascript:;" onclick="document.getElementById(\'pollgadget\').removeChild(this.parentNode);">Löschen</a></li>

Steht das exakt so im HTML-Quelltext?

Wenn ja, hast du zwei Fehler:
Einen logischen und einen syntaktischen.

Versuche den logischen Fehler zuerst zu finden indem du einfach sorgfältig durchgehst, was an welcher Stelle passieren soll.

[suit]

Einen logischen und einen syntaktischen.

Anm: Die Fehlermeldung "Node was not found" bezieht sich auf deinen logischen Fehler.

[john]

Also hinzufügen klappt super:

function addPollOption(){  
	mainForm = document.getElementById('poll_options'); // Form_Tag  
	var new_li = document.createElement('li');  
	var new_input=document.createElement('input');  
	var new_a=document.createElement('a');  
	new_input.name='polloptions[]';  
	new_input.type='text';  
	new_a.href='javascript:;';  
	new_a.onclick="removePollOption();"  
	new_a.appendChild(document.createTextNode('Löschen'));  
	new_li.appendChild(new_input);  
	new_li.appendChild(document.createTextNode(' '));  
	new_li.appendChild(new_a);  
	mainForm.appendChild(new_li);  
}

Entfernen nicht.
Es ist Standard das 2 Optionsfelder vorhanden sind, komischerweise kann er nur das 2. entfernen.
Im Moment sieht das ganze so aus:

function removePollOption(node){  
document.getElementById('poll_options').removeChild(node);  
}

  
<fieldset class="b1" id="pollgadget">  
<a href="javascript:;" onclick="addPollOption();">Option hinzufügen</a>  
<ul id="poll_options">  
<li><input type="text" name="polloptions[]" /> <a href="javascript:;" onclick="">Löschen</a></li>  
<li><input type="text" name="polloptions[]" /> <a href="javascript:;" onclick="removePollOption(this.parentNode);">Löschen</a></li>  
</ul>  
</fieldset>  

[john]

Boah ich Idiot. Schon okay, hab vergessen die Löschenfunktion jedem hinzuzufügen -.-.

[john]

Hm.

Komischerweise fügt der dem Löschlink das Onclick nicht zu:

new\_a.onclick="removePollOption(this.parentNode);";  

Funktioniert nicht.

[ChrisB]

Hi,

Komischerweise fügt der dem Löschlink das Onclick nicht zu:

new_a.onclick="removePollOption(this.parentNode);";

Funktioniert nicht.

Die onxyz-Attribute erwarten eine Funktionsreferenz, kein Textliteral.

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/

MfG ChrisB

[Struppi]

new_a.href='javascript:;';

Warum verwendest du hier einen Link, wenn du gar keinen Link brauchst?

new_a.onclick="removePollOption();"

Den onclick Event musst du mit einer Funktiopnsreferenz hinzufügen, nicht mit einer Zeichenkette.

In deinem Fall sieht das so aus:
new_a.onclick = removePollOption;

Struppi.

[john]

In deinem Fall sieht das so aus:
new_a.onclick = removePollOption;

Danke und wie lege ich den Parameter fest? Weil
new_a.onclick = removePollOption(this.parentNode);
und
new_a.onclick = removePollOption("this.parentNode");

funktionieren auch nicht -.-.

[ChrisB]

Hi,

new_a.onclick = removePollOption;

Danke und wie lege ich den Parameter fest?

Du brauchst überhaupt keinen.
Innerhalb der Funktion hast du über this Zugriff auf das A-Element.

Der Artikel, den ich dir vverlinkt habe, beschreibt das ganze ausführlicher.

MfG ChrisB

[john]

Okay das klappt.

Allerdings nur bei den hinzugefügten.
Bei den beiden die ich vorraussetze gehts nicht.
Egal ob:
onclick="removePollOption"
onclick="removePollOption;"
onclick="removePollOption()"
onclick="removePollOption();"

nichts davon geht.

[suit]

Allerdings nur bei den hinzugefügten.
Bei den beiden die ich vorraussetze gehts nicht.

Da fehlt dir auch die Elementreferenz "this" die du dort manuell übergeben musst - oder du hängst das event vorab an alle betreffenden a-Elemente und verzichtest auf den Inline-Eventhandler

[ChrisB]

Hi,

Okay das klappt.

Allerdings nur bei den hinzugefügten.
Bei den beiden die ich vorraussetze gehts nicht.

Ja, das ist so.

Egal ob:
onclick="removePollOption"
onclick="removePollOption;"
onclick="removePollOption()"
onclick="removePollOption();"

nichts davon geht.

Bei denen könntest du ja explizit einen Parameter übergeben (und musst dann in der Funktion entscheiden, welcher Fall vorliegt).

Oder, du machst es zeitgemäß, Stichwort unobstrusive JavaScript - dann hättest du auch für die bereits vorhandenen Elemente gar keine Eventhandler-Attribute mehr im HTML stehen, sondern würdest sie auch diesen erst dynamisch per JavaScript verpassen.
Der Weg ist zu bevorzugen.

MfG ChrisB