Using this within functions called with onclick ev

Question

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 what I have read, when an onClick is called in Javascript the this keyword can be used to refer to the element that called the function. With this in mind I have the following code:

window.onload = initialiseTodo;

function addRecord(){
  var title = document.getElementById('issueTitle');
  var issueContent = document.getElementById('issueContent');
  var contentArea = document.getElementById('contentArea');

  if(title.value.length > 0 && issueContent.value.length > 0){
   var newItem = document.createElement('div');
   newItem.id = 'task' + count++;
   newItem.className = 'task';
   newItem.innerHTML = '<div class="taskbody"><h1>' + title.value + '</h1>'+ issueContent.value + '</div><div class="deleteContainer">'
   + '<a class="delete">DELETE</a></div>';
   contentArea.appendChild(newItem);
   assignDeleteOnclick();
  }
}

function deleteRecord(){
   this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}

function assignDeleteOnclick(){
  var deleteArray = document.getElementsByClassName('delete');
    for(var i=0;i<deleteArray.length;i++){
      deleteArray[i].onclick= deleteRecord();
    }
}

function initialiseTodo(){
 var btn_addRecord = document.getElementById('addRecord');
 btn_addRecord.onclick = addRecord;
}

Basically I have a form that has two fields. When these fields are filled and the addRecord button is clicked a new div is added at the bottom of the page. This div contains a delete button. After the creation of this I assign an onclick event to the delete button which assigns the deleteRecord function when the delete button is clicked. My issue is with the deleteRecord function. I have used this to refer to the calling element (the delete button) and wish to remove the task div that is the outermost container however I current get a message that says: 'Cannot read property 'parentNode' of undefined ' which suggests to me the this keyword is not working correctly.

Any help would be greatly appreciated.

I've added the full code to a fiddle. http://jsfiddle.net/jezzipin/Bd8AR/

J

Answer 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

function deleteRecord(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:

function deleteRecord(elem){
  elem.parentNode.parentNode.remove();
}
function assignDeleteOnclick(){
  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