javascript - 无法读取未定义的属性`parentNode`

我有一个创建HTML表的函数：

makeHTMLTable: function(array){
    var table = document.createElement('table');
      for (var i = 0; i < array.length; i++) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.textContent = array[i];
        row.appendChild(cell);
        cell = document.createElement('td');
        var msgButton = document.createElement('button');
        msgButton.setAttribute("id", "msgButton" +i);
        msgButton.textContent = "message";
        msgButton.addEventListener("click", this.messageUser, false);
        cell.appendChild(msgButton)
        row.appendChild(cell);
        table.appendChild(row);
      }
      return table;
  },

然后我有这个功能：

messageUser: function(){
    debugger;
    this.parentNode.parentNode.remove();
    unMatch();
  },

当我单击msgbutton时，我希望它会删除整个行，包括按钮本身和返回的少量文本。
即：

hello [msgbutton]

goodbye [msgbutton]

如果我在问候行中单击[msgbutton]，它将如下所示：

goodbye [msgbutton]

但是到目前为止：this.parentNode.parentNode.remove();返回未定义。

编辑：

我在较早的承诺中称呼this.retrieveMatches()
this.fetchMatches（）返回一个数组

  retrieveMatches: function(){
    var tableResult = this.makeHTMLMatchesTable(this.fetchMatches(object));
    var matches = document.getElementById('matches')
    matches.parentNode.insertBefore(tableResult, matches);
  },

最佳答案

您正在尝试调用包含“ messageUser”功能而不是HTML元素的对象。
例如：

var obj = {
    notify: function(msg){
        alert(msg);
    },
    messageUser: function(){
        this.notify("some message"); //This line will call obj.notify()
        this.parentNode.parentNode.remove(); //obj is not a HTML element, therefore it will create an error
    }
}

由于要在循环中添加事件侦听器，因此需要创建一个绑定事件侦听器的函数。

function bindEvent(button){
    button.addEventListener("click", function(){
        this.parentNode.parentNode.remove(); //"this" refer to the "button" object
    }, false);
}

您可以将函数放在上面，然后再返回对象“表”

关于javascript - 无法读取未定义的属性`parentNode`，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40339228/