在JavaScript中的onclick事件調用的函數中使用此函數

Question

我目前正在使用香草Javascript構建一個小的Todo列表應用程序，但是在創建刪除按鈕（onClick會刪除其父元素）時遇到一些問題。

據我所讀，在Java語言中調用onClick時，可以使用this關鍵字來引用調用該函數的元素。 考慮到這一點，我有以下代碼：

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'，這對我有幫助此關鍵字無法正常工作。

任何幫助將不勝感激。

我已將完整代碼添加到小提琴中。 http://jsfiddle.net/jezzipin/Bd8AR/

Ĵ

Answer 1

您需要提供元素本身作為參數。 我通過更改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); }     
    }
}

演示