Impossible de lire la propriété `parentNode` undefined

Question

j'ai une fonction qui crée une table 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; 
    }, 

J'ai alors cette fonction:

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

Lorsque je clique sur le msgbutton Je m'y attendais pour enlever toute la rangée y compris le bouton lui-même et le petit peu de texte qui revient. -à-dire:

hello [msgbutton]

goodbye [msgbutton]

Si je clique [msgbutton] sur la ligne de bonjour, il ressemblera à ceci:

goodbye [msgbutton]

mais jusqu'à présent: this.parentNode.parentNode.remove(); est de retour undefined ..

EDIT:

J'appelle this.retrieveMatches() dans une promesse qu'il avait faite this.fetchMatches() retourne un tableau

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

Answer 1

Vous essayez d'appeler l'objet qui détient la fonction « messageUser », pas l'élément HTML. Par exemple:

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

Puisque vous ajoutez des écouteurs d'événement dans une boucle, vous devez créer une fonction qui lie un écouteur d'événement.

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

Vous pouvez placer la fonction ci-dessus avant de retourner l'objet « table »