set onclick attribute in Javascript

Question

When I run this Javascript code

var anchor = document.createElement("a");
anchor.style = "cursor:pointer;color:blue;";
 anchor.onclick = "this.parentNode.parentNode.removeChild(this.parentNode);";
 anchor.innerHTML = "remove";
 div.appendChild(anchor);

My anchor is created as <a style="cursor: pointer; color: blue;">remove</a> The onclick attribute is missing and the onclick function does not work.

Can I fix it?

Answer 1

You are setting it to a string and it does not actually set the attribute. Use a closure.

anchor.onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); };

ideally you would be using addEventListener

anchor.addEventListener("click", function(){ this.parentNode.parentNode.removeChild(this.parentNode); }, false);