在Javascript中的onclick事件调用的函数中使用此函数 [英] Using this within functions called with onclick event in Javascript

问题描述

我目前正在使用香草Javascript构建一个小的Todo列表应用程序，但是在创建删除按钮(onClick会删除其父元素)时遇到一些问题.

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.

据我所读，在Java语言中调用onClick时，可以使用this关键字来引用调用该函数的元素.考虑到这一点，我有以下代码:

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

基本上，我有一个包含两个字段的表单.填写这些字段并单击addRecord按钮后，将在页面底部添加一个新的div.该div包含一个删除按钮.创建此函数之后，我将一个onclick事件分配给删除按钮，当单击删除按钮时，该事件将分配deleteRecord函数.我的问题是与deleteRecord函数.我已经使用它来引用调用元素(删除按钮)，并希望删除作为最外层容器的任务div，但是我当前收到一条消息，内容为:无法读取未定义的属性'parentNode'，这对我有帮助此关键字无法正常工作.

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.

任何帮助将不胜感激.

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

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

J

推荐答案

您需要提供元素本身作为参数.我通过更改html使其包含 onclick ="deleteRecord(this)" 来做到这一点，从而使其更易于处理.这意味着您可以删除 assignDeleteOnclick()函数

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

演示

如果没有防止多余空白的元素，可以将 .content 样式设置为更好地隐藏

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

修改

由于您不希望使用内联 onclick ，因此可以使用js进行相同操作:

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

演示

这篇关于在Javascript中的onclick事件调用的函数中使用此函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！