Po odliczeniu czasu do wydarzenia wszystko usunąć lub zamienić na napis "TRWA"

Cześć. Przejdę od razu do rzeczy mam odliczanie czasu do wydarzenia. Gdy czas dojdzie do końca robię coś takiego:

 if (diff < 0) {
        clearInterval(myInterval);  
		document.getElementById("days").innerHTML = "";
		document.getElementById("hours").innerHTML = "";
		document.getElementById("minutes").innerHTML = "";
		document.getElementById("seconds").innerHTML = "";	
	}
}, 1000);

Wszystko ładnie pięknie poza tym że pod spodem mam pod każdą z nich dodane słowa "dni", "godzin", "minut", "sekund" i jak to też usunąć, gdyż chce by napisy były pod spodem a nie z boku. Jak to zrobić ? By potem w to miejsce wyświetlić napis "TRWA". Z góry Wielkie Dziękuję.

html

         <ul>
	    <li><span id="days"></span>Dni</li>
            <li><span id="hours"></span>Godzin</li>
            <li><span id="minutes"></span>Minut</li>
            <li><span id="seconds"></span>Sekund</li>
         </ul>

Usunąłem to w ten sposób ale nie wiem czy tak to się powinno robić i to pytanie do Was:
Nadałem id na znacznik <ul>

<ul id="clear">

No i ten znacznik z całą jego zawartością po upływie czasu usunąłem za pomocą JavaScript :

 if (diff < 0) {
        clearInterval(myInterval); 
		
	var elem = document.getElementById("clear");
        elem.parentNode.removeChild(elem);	
	}
}, 1000);

Pytanie kieruję dlatego iż w przyszłości chcę by wydarzenia zmieniały się automatycznie więc nie wiem czy remove jest dobrym rozwiązaniem. A co do napisu "TRWA" to teraz powinien utworzyć powiedzmy <div>. A może zrobić już jakiś pusty, nadać mu już styl w css i tylko dołożyć do niego zawartość ? Jak to fachowo zrobić i czego szukać chodzi mi o konkretne funkcję tak jak tu remove