调用Javascript中onclick事件函数中使用此(Using this within fun

我目前正在建设使用香草的Javascript小的待办事项列表应用程序，但我有一些问题，创建一个删除按钮的onClick消除它的父元素。

从我已阅读，当一个onClick调用JavaScript中的这个关键字可以用来指代调用该函数的元素。考虑到这一点我有以下代码：

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;
}

基本上，我有一个具有两个字段的形式。当这些字段被填充和的addRecord按钮被点击一个新的div在页面底部增加。该div包含一个删除按钮。创造这个后，我分配一个onclick事件删除按钮被点击删除按钮时分配deleteRecord功能。我的问题是与deleteRecord功能。我已经使用这个引用调用元素（删除按钮），并要删除的任务的div是最外层的容器，但是我目前得到一个消息，说：“不能读取属性‘’的未定义”这表明我parentNode this关键字不能正常工作。

任何帮助将不胜感激。

我已经添加了完整的代码到小提琴。 http://jsfiddle.net/jezzipin/Bd8AR/

你需要自己提供的元素作为参数。我这样做是通过更改HTML包括onclick="deleteRecord(this)" ，使之更容易一些处理。这意味着你可以删除assignDeleteOnclick()函数

function deleteRecord(elem){
  elem.parentNode.parentNode.remove();
}

演示

你可能风格的.content被隐藏更好，如果没有的元素，以防止多余的空白

编辑

既然你不想要一个内嵌onclick ，你可以用JS同样做到这一点：

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); }     
    }
}

演示