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.