Hallo und herzlich Willkommen zum vierten Teil zum Thema:
Wie man einen Zufallsgenerator programmiert.
Wie bereits im letzten Teil angekündigt, werden wir uns Heute um die folgende Problematik kümmern:
- Löschen einzelner Teilnehmer
Doch bevor wir zur Umsetzung kommen, möchte ich mich zunächst bei den Team von @de-stem und allen Upvotern für die Unterstützung meines letzten Posts bedanken. Ihr seid echt der Hammer👍
Löschen einzelner Teilnehmer
Um das löschen einzelner Teilnehmer zu ermöglichen, habe ich mir folgendes Gedacht: Man könnte die einzelnen Listeneinträge mit einem Data-Attribute versehen, welche auf den Index des Eintrages innerhalb des Arrays verweist.
// html
<ul>
<li data-array-index="0">couplelife</li>
<li data-array-index="1">fuxx</li>
<li data-array-index="2">theaustrianguy</li>
</ul>
// benötigtes JS innerhalb des Loops, welcher die Li Elemente erstellt
li.setAttribute('data-array-index', i);
Nun platzieren wir noch ein x am Ende des Listeneintrags. Dieses wird mit einen Click-Eventlistener versehen, welcher den Eintrag aus den Array löschen soll und im Anschluss die Liste erneut ausgeben soll.
Zur Erzeugung des Elements benutzen wir an dieser Stelle auch wieder JavaScript. Das sollte dann so aussehen:
// innerhalb des Loops, welcher die Li Elemente erstellt
var span = document.createElement("span");
var txt = document.createTextNode("x");
span.className = "delete";
span.appendChild(txt);
li.appendChild(span);
Die Klick-Events für die Spans müssen wir nach jeden neu initialisieren der Liste bauen. Um Sie zu selektieren, verwenden wir den Class Selektor.
// Elemente mit gewünschter Click Funktion versehen
var deletes = document.getElementsByClassName("delete");
for (var i = 0; i < deletes .length; i++) {
deletes [i].onclick = function() {
var eintrag = this.parentElement; // auf das LI zugreifen
var referenz = eintrag.getAttribute('data-array-index');
loescheEintrag(referenz);
}
}
Alternativ könnte man auch den Query Selektor All nehmen, dort Funktioniert die Addressierung wie mit Hilfe des CSS selectors und würde wie folgt aussehen:
var collection = document.querySelectorAll(".delete");
Was natürlich fehlt, ist das Löschen des Eintrages, dafür machen wir von der Array.splice Methode gebrauch:
function loescheEintrag(index) {
teilnehmerliste.splice(index, 1);
// neu bauen der liste
// platzieren der deletes usw...
}
Um das X von den Eintrag zu trennen, fügen wir noch folgendes CSS hinzu:
.delete {
padding-left:20px;
cursor:pointer;
}
Durch die Cursor angabe kann man die Maus umstylen. Das Padding drückt den Content auf der Seite nach links um 20 px raus. Hier mal ein passendes Bild mit den verschiedenen Mausstyles aus dem Web.
Ergebnis:
Werfen wir nun einen Blick auf das, was wir geschaffen haben:
Drücken wir auf das x verschwindet der entsprechende Eintrag und die Liste wird neu gebaut.
Wie immer Stelle ich euch auch hier ein Fiddle zum aktuellen Stand zur Verfügung.
Das soll es für heute gewesen sein. Morgen kommt dann passend zur Auflösung des Gewinnspiels das ermitteln der Gewinner dranne. Dann wird der Code etwas umstrukturiert und wir widmen uns den weiteren Anforderungen die noch offen sind 😊
Falls ihr noch Ideen oder Verbesserungsvorschläge habt, die man im Projekt nicht missen sollte, immer her damit, ich beiße nicht.