JavaScript geclontes DIV per entfernen

rejoice · 9. Februar 2011

Hallo

folgender Code ist gegeben:

PHP:

<script type="text/javascript">
<!--
var station=1;
function clone_this(objButton){
	station++;
	if(objButton.parentNode){	
		tmpNode=objButton.parentNode.cloneNode(true);
		target=objButton.parentNode.parentNode;
		arrInput = tmpNode.getElementsByTagName("input");
		tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b> <img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>";

		for(var i=0; i<arrInput.length; i++){
			if(arrInput[i].type=='text'){
				arrInput[i].value='';
			}
			if(arrInput[i].id=='delete'){
				arrInput[i].type='button';
				arrInput[i].value='Station '+station+' entfernen';
			}
		}
		target.insertBefore(tmpNode, document.getElementById("insert"));
	}
}

//-->
</script>



<div id='stationen'>
	<div id='frm'>
		<span><b>Station 1</b></span><br/>
		<input name="stationsname[]" type="text"  size="20" maxlength="30" /><br/>
		<input type="hidden" id="delete" value="Station 1 entfernen" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><br/><br/>
	</div>

</div>
<input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">

bei diesem code wird mein div mit der id = frm geclont und unten eingefügt.
dies klappt auch wunderbar.
dazu gibt es innerhalt des div's ein button der das geclonte div wieder entfernt.
das klappt auch wunderbar.

nun mein problem:
da ich kein button zum entfernen haben möchte sondern eine grafik binde ich diese über innerhtml ein:

PHP:

tmpNode.getElementsByTagName("span")[0].innerHTML="<b>Station "+station+"</b> <img src='../gfx/cross.png' title='Station entfernen' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>";

eingebunden wird diese auch , nur wenn ich draufklicke entfernt es nur die überschrift und nicht das ganze div.

leider weiß ich nicht woran es liegt. kann mir jemand helfen? ich komme echt nicht weiter...

das ganze script kann man sich unter http://test.der-kleine-kurier.de/acp/clonen.php anschauen

ps: wenn ich das bild direkt im html code einbinde funktioniert es, dies hat aber den nachteil das man so das hauptdiv entfernen kann und danach funktioniert das script nicht mehr

redeye86 · 9. Februar 2011

Warscheinlich liegt es daran, das du nur das Span entfernst. Oder weil du evtl ungewollt den Button mit in das Span packst. Es fehlt so jedenfalls jeweils ein parentNode, soweit ich das sehe:

[..] onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'>";

rejoice · 9. Februar 2011

danke das war es :-) hab so viel geteste aber das nicht ;-)

Ergänzung (10. Februar 2011)

ich habe nun das span noch in h2 umgeschrieben da es ja auch eine Überschrift ist.
darf man im h2 - Tag ein imgage einbinden?

es funktioniert nun alles perfekt aber findet ihr evtl noch andere fehler?

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
var station=1;
function clone_this(objButton){
        station++;
        if(objButton.parentNode){       
                tmpNode=objButton.parentNode.cloneNode(true);
                target=objButton.parentNode.parentNode;
                arrInput = tmpNode.getElementsByTagName("input");
                tmpNode.getElementsByTagName("h2")[0].innerHTML="Station "+station+" <img src='../gfx/cross.png' title='Station "+station+" entfernen' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'>";

                for(var i=0; i<arrInput.length; i++){
                        if(arrInput[i].type=='text'){
                                arrInput[i].value='';
                        }
                }
                target.insertBefore(tmpNode, document.getElementById("insert"));
        }
}
//-->
</script>
<title></title>
</head>
<body>
<form>
	<div id='stationen'>
		<div id='frm'><h2>Station 1</h2>
			<input name="stationsname[]" type="text" size="20" maxlength="30"><br><br>
		</div>
	</div>
	<input id="insert" type="button" value="weiter Station einfuegen" onclick="clone_this(frm)">
</form>
</body>
</html>

rejoice · 11. Februar 2011

da nun alles funktioniert hab ich noch eine frage bezüglich der stationen. sobald man eine station hinzufügt wird ja auch die stationsnummer erhöht

wenn ich nun 10 hinzufüge und 3 entferne geht es demzufolge mit der 11 weiter

gibt es eine möglichkeit das er die stationen immer neu befriftet .. also wenn ich von 10 stationen die 4 entferne dass das script alle stationen neu durchzählt und die stationen neu benennt ( aus station 4 wird dann die 3) ?

redeye86 · 11. Februar 2011

Also ich kann immer maximal eine Station hinzufügen. Ich glaube das ist so nicht gewollt. Wenn ich dann mehrmals auf den Knopf drücke, scheint der Zähler im Hintergrund hochzuzählen. Wenn ich dann wieder die hinzugefügte Station lösche, dann wieder hinzufüge, bin ich bei Station XY. Tritt bei mir zumindest bei Chrome(ium) auf. Bei Firefox geht es. Um die Zahlen zu korrigieren, kannst du einfach bei jeder Änderung alle divs durchlaufen in <div id='stationen'> und dann neu beschriften.

Ich würde es allerdings auch so machen, das ich die erste Station fest einbaue. Dann würd ich mir dann ein Container Div nehmen, das ich per CSS unsichtbar mache und da würd ich dann ein "Template" des zu kopierenden Divs reinsetzen. Dann kann man immer auf das Container div zugreifen, den Inhalt daraus als Objekt kopieren und per AppendChild in das 'stationen'-div einbinden. So kann man viel komfortabler mit dem Div arbeiten und brauch es nicht in das Javascript einbetten.

rejoice · 11. Februar 2011

hmm stimmt bei chrome klappt das nicht richtig... warum weiß ich nicht :-(

die erste station ist fest eingebaut siehe html-code aber ich mach es nicht unsichbar da ja so die möglichkeit besteht das formular abzuschicken ohne eine station auszufüllen aber es muss immer eine station ausgefüllt sein ( im richtigen script gibt es auch viel mehr inputfelder.

wie kann ich die die divs mit javascript zählen?

redeye86 · 11. Februar 2011

Ne, ich meinte das etwas anders, die erste Station soll so bleiben wie sie ist, nur alle weiteren würde man dann kopieren. Alternativ kannst du auch das ganze Objekt mit all seinen Kindelementen in Javascript erzeugen. Das wird dann bestimmt auch besser im Chrome funktionieren. Dazu mal hier gucken:

http://programming.top54u.com/post/Javascript-Create-New-Div-HTML-Element-Dynamically.aspx

Dann kannst du ja noch nach jeder Eingabe prüfen, ob mindestens 2 Stationen ausgefüllt sind und andernfalls den Submitbutton deaktivieren werfen. Zusätzlich beim onSubmit einen Fehler werfen, wenns nicht passend ist.

rejoice · 11. Februar 2011

ich hab mir deinen link mal angeschaut und es sieht recht gut aus aber ich müsste für jeden input alle angaben machen und insgm hat eine station ca 25 inputfelder

ich verstehe nur nicht warum chrome da so anders verarbeitet...

redeye86 · 11. Februar 2011

Also ich habe mir das Ganze nochmal mit den Chrome Entwicklertools angesehen und festgestellt, das du das Div mit der Id "stationen" klonst. Somit hast du nachher mehrere Divs mit der selben Id, was aber eigentlich nicht sein darf. Ids sind immer eindeutig. Das ist vermutlich auch der Fehler, der den Chrome zum abbrechen bringt.

In das Onclick event des Bildes würde ich zudem einen aufruf removeStation(this); eibauen und dann eine neue Funktion mit eben diesem Namen einbauen (removeStation(element)). Das macht es dann auch etwas übersichtlicher.

rejoice · 12. Februar 2011

hmm ich werde das dann wohl in php-verwirklichen... das man einfach eingibt wieviele stationen man möchte

ich glaube das ist weniger fehleranfällig

Suche

JavaScript geclontes DIV per entfernen

rejoice

Lt. Junior Grade

redeye86

Lt. Junior Grade

rejoice

Lt. Junior Grade

rejoice

Lt. Junior Grade

redeye86

Lt. Junior Grade

rejoice

Lt. Junior Grade

redeye86

Lt. Junior Grade

rejoice

Lt. Junior Grade

redeye86

Lt. Junior Grade

rejoice

Lt. Junior Grade

Ähnliche Themen