[JS] Select kopieren / entfernen?

[fragger1991]

Hallo,

folgendes:
Ich möchte ein Script machen mit welchem ich Feuerwehreinsätze eintragen kann. Ich habe bereits die Fahrzeuge / Anhänger in einer Datenbank hinterlegt, nun ist ja das Problem da, das meist die Komplette Wehr oder mehr als 1 Fahrzeug teils auch in verschiedenen Kombinationen ausrückt (Mannschaftstransporter mit Rettungsboot, Löschfahrzeug mit Anhängeleiter, etc. pp.), daher möchte ich es möglich machen Fahrzeuge Dynamisch hinzuzufügen aber auch wieder zu entfernen. Ich würde es gerne so mache das ich auch z.B. den 3 von 5 Einträgen löschen kann und nicht nur das letzte entfernen kann.

Mein bisheriger Versuch sieht so aus:

  <tr>
    <td>Fahrzeuge:</td>
    <td><a href="#" id="cloneFahrzeuge">hinzufügen</a>
		<div class="Fahrzeug">
			<select name="fahrzeug[]" class="fzeuge">$fzeuge</select>
			<select name="anhaenger[]" class="haenger"><option value="0">ohne Anhänger</option>$anhaenger</select>
			<div id="del"></div>
		</div>
		<br />
	</td>
  </tr>
<script type="text/javascript">
	$("#cloneFahrzeuge").click(function () {
		objDate = new Date().getTime();
		objDel = "removeFormField('" + objDate + "');";
		$('.Fahrzeug').clone().removeAttr("class").attr("id", objDate).insertAfter(".Fahrzeug");
		document.getElementById('del').innerHTML = '<a href="#" onclick="' + objDel + '">entfernen</a>';
		//$('.clickEvent').clone().removeAttr("class").removeAttr("onclick").attr("onclick", objDel).insertAfter(objDate);
	});

function killElement(element) {
 if (element) {
  var papa = element.parentNode;
  if (papa) papa.removeChild(element);
 }
}

function removeFormField(id) {
	killElement(document.getElementById(id));
}
</script>

Mit dem Code habe ich jedoch das Problem das teilweise sich dann die Selects nicht mehr löschen lassen. Der Code kann gerne auf jQuery basieren, andere Lösungsansätze - welche den gleichen Erfolg haben, sind auch gerne gesehen.

Ich hoffe mir kann jemand helfen, hänge da nun schon 3 Tage dran und bin wirklich kurz davor durchzudrehen weil es nicht so klappt wie ich es will....

Danke!

 

[geheim]

Hi
also was mir bei deinem Script zuerst auffällt ist, dass du die delete links immer in den obersten <div id="del"></div> packst.

document.getElementById('del')

Dein Script funktioniert so:
Klone <div class="Fahrzeug">.
Bennene den Klon um und füge ihn direkt unter <div class="Fahrzeug"> wieder ein.
Überschreibe den Inhalt von des ersten vorkommens von #del mit einem neuen link. Dieses erste vorkommen ist immer innerhalb von <div class="Fahrzeug">

Beim nächsten hinzufügen:
Klone <div class="Fahrzeug">, das den löschen link für das davor eingefügte Element enthällt.
Bennene den Klon um und füge ihn direkt unter <div class="Fahrzeug"> und über der davor erzeugten Kopie wieder ein.
Überschreibe den Inhalt von des ersten vorkommens von #del mit einem neuen link. Dieses erste vorkommen ist immer innerhalb von <div class="Fahrzeug">

Der Deletelink für das erste hinzugefügte Element befindet sich nun also im Element, dass als zweites hinzugefügt wurde und der Deletelink für das als zweites hinzugefügte Element befindet sich nun also in <div class="Fahrzeug">.

Die Deletelinks sind also falsch zugewiesen. Klickst du jetzt auf einen Deletelink wird ein ganz anderes Element entfernt, dass wieder ein Deletelink für ein anderes Element beinhaltet. Dieser Deletelink existiert nun also nicht mehr und das löschen geht auch augenscheinlich nicht mehr auf.

So würde ich das ganze aufbauen:

 <tr>
<td>Fahrzeuge:</td>
    <td>
       <a href="#" id="cloneFahrzeuge">hinzufügen</a>
       <!-- Orginal "select-set". Nicht sichtbar und wird nicht verändert -->
	<div id="Fahrzeug" style="display: none;">
		<select name="fahrzeug[]" class="fzeuge">
                       <option>Mannschaftstransporter</option>
                       <option>Löschfahrzeug</option>
                 </select>
		<select name="anhaenger[]" class="haenger">
                      <option value="0">ohne Anhänger</option>
                      <option>Anhängeleiter</option>
                      <option>Rettungsbot</option>
                 </select>
		<div class="del"></div>
	</div>
	<!-- Eigentliches Inhaltselement in dem nachher die einzelnen Auswahlen für den Benutzer sichbar stehen -->	
        <div id="selectContainer">
		
	</div>
		<br />
	</td>
  </tr>
<script type="text/javascript">
$(document).ready(function(){
      //erzeuge das erste select-set wenn die Seite fertig geladen ist durch Aufruf der Funktion
       addElement();
});

$("#cloneFahrzeuge").click(function () {
	addElement();
});
  //counter wird in der funktion hochgezählt
  var count = 0;
function addElement(){
     var objDel = "removeFormField('obj" + count + "');";
    //Gib dem geklonten Element die id obj + counter und speichere das ganze in der variablen
     var newElement = $('#Fahrzeug').clone().removeAttr("id style").attr("id", 'obj'+count);
		//Füge das neu erstellte Element am Ende des divs #selectContainer ein 
     $('#selectContainer').append(newElement);
    //Selectiere das div zum löschen innerhalb des neu erstellen elements und füge den löschen link hinzu
     $('#obj'+count).find('.del').html('<a href="#" onclick="'+objDel+'">entfernen</a>');
     //erhöhe den counter um eins
     count++;
}

function killElement(element) {
 if (element) {
  var papa = element.parentNode;
  console.log(papa);
  if (papa) papa.removeChild(element);
 }
}

function removeFormField(id) {
	killElement(document.getElementById(id));
}
</script>

Der Orginal-Eintrag mit allen Selectoptionen, etc... wird dabei auf hidden gesetzt und ist gar nicht sichtbar. Dieser Eintrag bleibt unverändert die ganze Zeit bestehen.
Direkt wenn die Seite fertig geladen ist, wird daraus dann der erste Eintrag erzeugt.
Das Datum hab ich rausgenommen und durch einen Counter ersetzt, weil es schneller geht und Resourcensparender ist (nicht das es wirklich einen Unterschied machen würde).

Die <div id="del" hab ich durch ein class="del" ersetzt, da eine ID einmalig ist (zumindest sein sollte).

gz
geheim