img mit JS ansprechen

Tomsen · 22. März 2014

Hey,

ich hab ein Problem und komme irgentwie nicht zur Lösung.

Ich will ein Bild via Javascript löschen. Bevor es zum löschen geht hab ich erstmal RemoveChild genommen um zu sehen ob die Funktion überhaupt funktioniert,
und ob das Bild angesprochen wird.

Also unter jedem Bild wird ein kleines img erstellt (X zum löschen)
In diesem wird bei onClick der Pfad vom davor erstellten Bild gespeichert.
Dieser wird an eine function übergeben welche dann damit arbeiten soll. Der Name ist gleichzeitig der Pfad der img Datei.

Aber wieso klappt das nicht?

PHP

while(($file = readdir($dir)) !== false)
			{  
				if(in_array(pathinfo($file, PATHINFO_EXTENSION), $extensions))
				{ 
					echo '<div name="picture" style="width:auto; margin:5px; height:auto; float:left;"><img style="border:1px; border-color:black; border-style:solid;" src="'.$path.$file.'" alt="L&auml;dt Bild!" width="300" height="100"/><br /><div align="center"><img name="Album2/'.$file.'" style="margin:0px auto; text-align:center; cursor:pointer;" src="delete.png" onclick=""javascript:deletePic(Album2'.$file.')></div></div>';
				}  
			}

PHP

function deletePic (pfad) {
	var name = pfad;
	var node = document.getElementById(pfad);
	if (node.parentNode) {
		node.parentNode.removeChild(node);
	}
}

hat einer von euch einen Lösungsweg ohne MySQL?

- Tom

Goldkiller · 22. März 2014

Ohne MySQL ? Was hat denn das damit zu tun :-0

Code

var node = document.getElementById(pfad);

Sehe schon nirgendwo, wo du dem Bild eine ID zuweist. Das solltest du schon mal als 1. nachholen.

Code

var name = pfad;
    var node = document.getElementById(pfad);

Wozu brauchst du "name", wenn du sowieso nur "pfad" benutzt ?

Übrigens kann man JS auch debuggen ( console() ). Ein guter Anfang wäre, sich "pfad" und "node" ausgeben zu lassen.
Ob du parentNode brauchst,weiss ich nicht ( oder ob es so überhaupt funktioniert ) . Ich hätte das mit jQuery über remove() gemacht.

Tomsen · 22. März 2014

Ich meine nur das ich keine MySQL Datenbank erstellen will um die Bilder eindeutig zuweißen zu können.

Ich seh da grad im Moment selber nichtmehr durch, steh irgentwie aufn Schlauch.

- Tom

Goldkiller · 22. März 2014

Die Datenbank hat doch nichts mit den Bildern zu tun.
Du machst es dir einfach zu kompliziert und dann nicht richtig. Wenn du mit getElementById arbeiten willst, brauchst du auch eine ID. Eine ID muss keine Zahl sein, es kann ein freier Text sein.

Code

<div id = "test"></div>

Die ID wäre jetzt "text".

http://stackoverflow.com/quest…his-in-javascript-onclick
http://jsfiddle.net/8cvBM/
this -> Davon parentNode -> löschen.

Tomsen · 22. März 2014

Ich habs jetzt so aber die Funktion scheint garnicht erst aufgerufen zu werden:

PHP

function deletePic(pfad) {
	var path = pfad;
	alert (path);
	/*var name = "pfad";
	var link = '<a href="/auswertung.php?name='
	+ name + '">Eintragen...</a>'
	document.write(link);
	 window.location.reload();*/
	}

PHP

<img style="margin:0px auto; text-align:center; cusor:pointer;" src="delete.png" onclick="pic(Album2/'.$file.')">

- Tom

Goldkiller · 22. März 2014

Wie denn auch.
deletePic() ist nicht pic(). Glaube auch das JavaScript meckern wird, weil du den Text nicht richtig als String übergibst.
Das sollte dir aber per JavaScript in der Konsole auch ausgegeben werden.

Die beiden Links von mir hast du dir sicherlich auch nicht angeschaut :/.

Tomsen · 23. März 2014

Zitat von Goldkiller

Wie denn auch.
deletePic() ist nicht pic(). Glaube auch das JavaScript meckern wird, weil du den Text nicht richtig als String übergibst.
Das sollte dir aber per JavaScript in der Konsole auch ausgegeben werden.

Die beiden Links von mir hast du dir sicherlich auch nicht angeschaut :/.

Der Fehler mit deletePic und Pic ist egal. Ich wollte es probeweiße nur mal umbennen, geht letzten Endes aber auch nicht. :\
Doch die Links hab ich mir angeschaut, allerdings weiß ich nicht was das

PHP

$(e).text('there');

'there' das bedeutet?

Aber bis dahin kommt es ja nichtmal hab ja zum Test nur ein alert reingetan.
Die Funktion wird garnicht erst aufgerufen. Liegt es daran das ich irgentwie beim <img> Tag die parameter beim aufrufen der funktion falsch verwende?

- Tom

xGreekz7x · 23. März 2014

Damit du dich selbst ein arbeitest habe ich dir hier ein kleines Beispiel mittels jQuery geschrieben.

HTML

<p>
			<img src="http://tympanus.net/Development/StackEffects/img/1.png" alt="" id="deleteImage1" /> 
			<img src="http://www.gettyicons.com/free-icons/112/must-have/png/32/delete_32.png" alt="" class="deleteImg" data-delete="#deleteImage1">
		</p>
		<p>
			<img src="http://tympanus.net/Development/StackEffects/img/2.png" alt="" id="deleteImage2" /> 
			<img src="http://www.gettyicons.com/free-icons/112/must-have/png/32/delete_32.png" alt="" class="deleteImg" data-delete="#deleteImage2">
		</p>
		<p>
			<img src="http://tympanus.net/Development/StackEffects/img/3.png" alt="" id="deleteImage3" /> 
			<img src="http://www.gettyicons.com/free-icons/112/must-have/png/32/delete_32.png" alt="" class="deleteImg" data-delete="#deleteImage3">
		</p>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
			(function($) {
				$(document).ready( function() { 
					$(".deleteImg").click(function() { // delete Icon click event
						var e = $(this).attr('data-delete'); // get the data-delete Selector
						$(e).remove(); // remove Image
						$(this).remove(); // remove delete Icon
					});
				});
			})(jQuery);
		</script>

Alles anzeigen

Tomsen · 23. März 2014

Zitat von xGreekz7x

Damit du dich selbst ein arbeitest habe ich dir hier ein kleines Beispiel mittels jQuery geschrieben.

HTML

(function($) {
				$(document).ready( function() { 
					$(".deleteImg").click(function() { // delete Icon click event
						var e = $(this).attr('data-delete'); // get the data-delete Selector
						$(e).remove(); // remove Image
						$(this).remove(); // remove delete Icon
					});
				});
			})(jQuery);

Danke dafür, aber du hast den Bildern mit
id="deleteImage1 bzw. data-delte ja eindeutige ID,s zugewiesen.
Bei mir wird jedes Bild ja erstmal ausgelesen somit kann ich ja nicht jedes mit einer ID wie deiner versehen da die Anzahl und die Bilder ja variabel ist oder nicht?
Deswegen versuche ich ja den Pfad zu übertragen um das Bild dann ansprechen zu können.
Und daran scheiterts ja bei mir.

- Tom

xGreekz7x · 23. März 2014

for schleife?

Goldkiller · 23. März 2014

Dann mach es halt ohne IDs.

Code

$(this).parent().parent().remove(); // img bzw this -> div -> div

//Edit: Ausgehend von der Struktur in deinem Startpost.

breadfish.de 12. März 2022