HTML
<html><head><title>Test</title>
<script type="text/javascript">
var ausgabe = '';
var kurs= ['Mathematik', 'Elektrotechnik', 'Physik', 'Java-Programmierung']
var ausgabeliste = [];
var ausgewaehlterKurs;
var neu;
function zeigeKursliste() {
for (i = 0; i < kurs.length; i++) {
ausgewaehlterKurs= kurs[i];
var buttonWarenkorb = "<button type='button' value='" + ausgewaehlterKurs+
"' onclick='fuegeKursHinzu(this)'>in den Warenkorb</button>";
ausgabe += "<tr><td>" + ausgewaehlterKurs+ "</td><td>" + buttonWarenkorb + "</td></tr>";
}
ausgabe += "</table></p>";
ausgabe += "<p><table><tr><th>gebuchter Kurs</th><th></th></tr>";
ausgabe += "<tr><td id='ausgabeliste'></td><td></td></tr>";
ausgabe += "</table></p>";
document.body.innerHTML = ausgabe;
}
function refreshChoosenCourses(){
document.getElementById("ausgabeliste").innerHTML = "";
for(var i = 0; i < ausgabeliste.length; i++){
var buttonX = "<button type=\"button\" onclick=\"entferneKurs("+i+")\">X</button>";
document.getElementById("ausgabeliste").innerHTML += ausgabeliste[i]+ " " + buttonX + "<br/>";
}
}
function fuegeKursHinzu(neu) {
ausgewaehlterKurs= neu.value;
ausgabeliste.push(ausgewaehlterKurs);
ausgabeliste.sort();
refreshChoosenCourses();
}
function entferneKurs(elementId) {
for (var e = 0; e < ausgabeliste.length; e++) {
if(e == elementId){
ausgabeliste.splice(e, 1);
}
}
refreshChoosenCourses();
}
</script>
</head>
<body onload="javascript:zeigeKursliste();">
</body>
</html>Die einfachste Art (so wie hier) ist es die Ausgabe immer neu zu erzeugen falls sich ein Element ändert, sortiert oder gelöscht wird. Mit "i
nnerHTML += "
ein Element an die Liste anzuhängen und dann noch zu wollen das dieser HTML-Text automatisch sortiert wird kann nicht funktionieren. Gelöscht wird mit der Arrayposition welche der Funktion per Parameter übergeben wird. Dadurch ist es auch möglich mehrere gleiche Kurse in das Array zu packen und den richtigen zu löschen. (Wie du das vor hattest ist mir schleierhaft
)