Using This Within Functions Called With Onclick Event In Javascript

I'm currently building a small Todo list application using vanilla Javascript but I'm having some issues creating a delete button that onClick removes it's parent element. From wha

Solution 1:

You need to provide the element itself as a parameter. I did so by changing the html to include onclick="deleteRecord(this)" to make it a little easier to deal with. This means you can remove the assignDeleteOnclick() function

functiondeleteRecord(elem){
  elem.parentNode.parentNode.remove();
}

Demo

You might style the .content to be hidden better if there are no elements to prevent that extra white space

Edit

Since you don't want an inline onclick, you can do it with js the same:

functiondeleteRecord(elem){
  elem.parentNode.parentNode.remove();
}
functionassignDeleteOnclick(){
  var deleteArray = document.getElementsByClassName('delete');
    for(var i=0;i<deleteArray.length;i++){

        // Has to be enveloped in a function() { } or else context is lost
        deleteArray[i].onclick=function() { deleteRecord(this); }     
    }
}

Demo