Mit Script erstelltes Element wieder entfernen

Spelmann

Spelmann

Erfahrenes Mitglied
Hi,
Als JavaScript Neuling versuche mal wieder ein paar Schritte diesmal mit jQuery.

Ich erzeuge Textfelder mit folgendem Code
Code: 
$(document).ready(function(){
		var îd = 1;
		//Diese Funktion fügt eine Zeile hinzu
	  	$("#neu").click(function(){
			var zeile = '<div id="Zeile'+îd+'"><input name="'+îd+'" type="text" value="Feld mit der ID '+îd+'">&nbsp;<div class="entfernen" id="erase'+îd+'">entfernen</div></div>';
			$("#ausgabe").append(zeile);
			//Funktion um eine Zeile zu entfernen?
			$("#erase"+îd).click(function(){
				$("#Zeile"+îd).remove();
			   }); 
			îd++;
		});
      });

HTML: 
<style type="text/css">
      <!--
      #neu {cursor:pointer;}
      .entfernen{cursor:pointer}
      -->
    </style>
  </head>
  <body>
	<div id="neu">Input Feld hinzuf&uuml;gen</div>
        <div id="ausgabe"><br></div>
  </body>

Das Hinzufügen funktioniert. Nur für das Löschen fehlt mir wohl der richtige Ansatz. Wie könnte ich das Lösen?
 
Ich versuche es jetzt so:
Code: 
$("#neu").click(function(){
			var zeile = '<div id="Zeile'+îd+'"><input name="'+îd+'" type="text" value="Feld mit der ID '+îd+'">&nbsp;<div class="entfernen" id="entfernen'+îd+'" onClick="this.parentNode.removeChild(this)">entfernen</div></div>'; 
			$("#ausgabe").append(zeile);
		îd++;
		});

Dabei wird aber nur das div #entfernen entfernt. Wenn mir jetzt jemand sagen könnte wie ich das Elternelement mit löschen kann wär prima.
 
Javascript: 
$(document).ready(function() {
	//Diese Funktion fügt eine Zeile hinzu
	$("#neu").click(function() {
		var zeile = $('<div><input type="text">&nbsp;<div class="entfernen">entfernen</div></div>');
		$("#ausgabe").append(zeile);
		
		zeile.find(".entfernen").click(function() {
			$(this).parent().remove();
		});
	});
});

Oder auch folgendes:
Javascript: 
$(document).ready(function() {
	//Diese Funktion fügt eine Zeile hinzu
	$("#neu").click(function() {
		var zeile = $('<div><input type="text">&nbsp;<div class="entfernen">entfernen</div></div>');
		$("#ausgabe").append(zeile);
	});
	
	$(".entfernen").live("click", function() {
		$(this).parent().remove();
	});
});
 
Zuletzt bearbeitet:
Hey Prima.
Habe ich wirklich ein Stück weiter was verstanden!
Dass ich statt der id entfernen die class entfernen ansprechen kann hat mich überrascht.

Kurze Querfrage auch wenns kein guter Forumsstil ist:
Kann ich mir den ganzen Zauber mit der hochzählenden id eigentlich sparen? Bekomme ich die Werte aus <input name="meinInputFeld" usw...> via JavaScript irgendwie in ein Array meinInputFeld[] ?
 
Zuletzt bearbeitet:
Spelmann hat gesagt.:
Dass ich statt der id entfernen die class entfernen ansprechen kann hat mich überrascht
Zum Vergrößern anklicken....

Du kannst mit jQuery (bzw. der enthaltenen Sizzle CSS selector engine) noch sehr viel mehr machen. Hier mal eine Liste der Selektoren, die nur dazu dienen eine Menge an Elementen zu finden: http://api.jquery.com/category/selectors/

Spelmann hat gesagt.:
Kann ich mir den ganzen Zauber mit der hochzählenden id eigentlich sparen? Bekomme ich die Werte aus <input name="meinInputFeld" usw...> via JavaScript irgendwie in ein Array meinInputFeld[] ?
Zum Vergrößern anklicken....

Das hochzählen brauchst du sehr warscheinlich nicht.
Was hast du denn anschließend mit dem Array vor? Hier mal ein Beispiel:
Javascript: 
var alleInputs = $(":input");
var meinInputFeld = [];
alleInputs.each(function(index, element) {
    meinInputFeld.push(element.value);
});

Außerdem könntest du die Werte mittels serialize() so umwandeln, dass sie als Parameter in einer Post oder Get Anfrage verwendet werden können.
Javascript: 
$(":input").serialize();

Wenn du noch mehr Fragen hast, ich bin sehr fit in jQuery und auch JavaScript im allgemeinen.

Hier noch eine dritte Variante der Lösung deiner ersten Frage
Javascript: 
$(document).ready(function() {
	//Diese Funktion fügt eine Zeile hinzu
	$("#neu").click(function() {
		var zeile = $('<div><input type="text">&nbsp;</div>');
		var button = $('<div class="entfernen">entfernen</div>');
		
		zeile.append(button);
		$("#ausgabe").append(zeile);
		
		button.click(function() {
			zeile.remove();
		});
	});
});

jQuery ist da sehr vielfältig einsetzbar.
 
Zuletzt bearbeitet:
Hi CPoly,
vielen Dank für die Mühe die Du Dir hier gibst!!
Was hast du denn anschließend mit dem Array vor?
Zum Vergrößern anklicken....
Das Ganze soll Teil einer Online Rechnungsstellung werden. Bisher habe ich das ausschließlich in PHP gelöst. Aber einen neuen Seitenaufruf zu starten blos weil man mal ein Element hinzufügen möchte ist doch unökonomisch.
Die einzelnen Rechnungsposten (dann mit je zweitem input für Nettopreis) sollen via POST mit anderen Werten zusammengeführt, und dann per PHP in eine DB geschrieben werden. Ganz übliches Gedöns eigentlich.

Ich setze mich mal mit Deinen Tipps auseinander.
Danke Dir.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück