JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Zufallsgenerator</h1>
<input type="text" id="teilnehmer" placeholder="Name des Teilnehmers"/>
<button id="knopf">Steemian hinzufügen</button>

<h2>Teilnehmerliste</h2>
<ul id="teilnehmerliste"></ul>
<button id="loeschen">Liste leeren</button>

JavaScript

var teilnehmerliste = [];
knopf.addEventListener("click", function(){
		// feld holen
    var eingabefeld = document.getElementById("teilnehmer");
    var wert = eingabefeld.value;
    // feld leeren
    eingabefeld.value = "";
    // wenn wert nicht leer, in liste eintragen!
    if (wert != "") {
    	 teilnehmerliste.push(wert);
    }
    // ul liste holen
    var guiTeilnehmerliste = document.getElementById("teilnehmerliste");
    // ul liste leeren
    while (guiTeilnehmerliste.firstChild) {
      guiTeilnehmerliste.removeChild(guiTeilnehmerliste.firstChild);
  	}
    // ul liste füllen
    for (var i=0; i < teilnehmerliste.length; i++) {
  		var li = document.createElement("li");
  		var textKnoten = document.createTextNode(teilnehmerliste[i]);
  	  	li.appendChild(textKnoten);
      	guiTeilnehmerliste.appendChild(li);
  	}
});


var loeschenknopf = document.getElementById("loeschen");
loeschenknopf.addEventListener("click", function(){
    listeLeeren();
});

function listeLeeren() {
  teilnehmerliste = [];
  sichtbareListeLeeren();
}

function sichtbareListeLeeren () {
	var guiTeilnehmerliste = document.getElementById("teilnehmerliste");
  while (guiTeilnehmerliste.firstChild) {
      guiTeilnehmerliste.removeChild(guiTeilnehmerliste.firstChild);
  }
}