Question

我目前正在使用vanilla Javascript构建一个小的Todo列表应用程序，但是我在创建一个删除按钮时遇到了一些问题，onClick删除了它的父元素。

根据我的阅读，当在Javascript中调用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'的undefined'，这对我来说this关键字无法正常工作。

非常感谢任何帮助。

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

Ĵ

Answer 1

您需要将元素本身作为参数提供。我这样做是通过将html更改为包含onclick="deleteRecord(this)"来使其更容易处理。这意味着您可以删除assignDeleteOnclick()功能

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

Demo

如果没有任何元素可以防止额外的空白区域，您可以更好地隐藏.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); } } }

Demo

在Javascript中使用onclick事件调用的函数中使用它

1 个答案: