Dodawanie/usuwanie elementów tworzonych dynamicznie [JS]

pytanie zadane 17 kwietnia 2017 w JavaScript przez DanioL Nowicjusz (120 p.)

Witam,

nie wiem jak zacząć więc przejdę od razu do kodu:

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Comments</title>

	<link rel="stylesheet" href="styles.css"/>
</head>
<body>
	<div id="main">

		<h1>Komentarze:</h1>

		<input type="text" class="coment-value"/>

		<button class="btnaddcom">Add comment</button>

		<ul class="comment-list"></ul>

	</div>

	<script src="main.js"></script>
</body>
</html>

JS:

var btnadd = document.querySelector(".btnaddcom");

btnadd.addEventListener("click", function() {
	var li = document.createElement("li");
	var list = document.querySelector(".comment-list");
	var text = document.querySelector(".coment-value").value;
	li.innerHTML = text;
	list.appendChild(li);
	li.setAttribute("onclick", "delme(this)");
}, false)

function delme(me) {
	me.parentNode.removeChild(me);
}

Moje pytanie brzmi: Czy jest inny sposób niż tak barbarzyńsko dodawać do elementu li atrybut "onclick" (gdzieś czytałem, że nie powinno się tak robić)? Próbowałem dodawać li.addEventListener("click", delme(this)); zamiast li.setAttribute("onclick", "delme(this)"); lecz nie wiem czemu od razu po dodaniu elementu li, usuwa się on bez czekania ne event "click". Może jest to spowodowane tym, że addEventListener znajduje się wtedy w innym addEventListener? Super by było jak by mi to ktoś dokładnie wytłumaczył. Pozdrawiam.