I have a function that creates a HTML table:

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

I then have this function:

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

When I click the msgbutton I am expecting it to remove the whole row including the button itself and the little bit of text that es back. i.e:

hello [msgbutton]

goodbye [msgbutton]

If i click [msgbutton] on the hello row it will look like this:

goodbye [msgbutton]

but so far this: this.parentNode.parentNode.remove(); is returning undefined..

EDIT:

I call this.retrieveMatches() in an earlier promise this.fetchMatches() returns an array

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

I have a function that creates a HTML table:

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

I then have this function:

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

When I click the msgbutton I am expecting it to remove the whole row including the button itself and the little bit of text that es back. i.e:

hello [msgbutton]

goodbye [msgbutton]

If i click [msgbutton] on the hello row it will look like this:

goodbye [msgbutton]

but so far this: this.parentNode.parentNode.remove(); is returning undefined..

EDIT:

I call this.retrieveMatches() in an earlier promise this.fetchMatches() returns an array

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

• javascript
• reactjs
• removechild
• parent-node

Share Improve this question Follow edited Oct 31, 2016 at 9:25 The worm asked Oct 31, 2016 at 9:11 The wormThe worm 5,8881414 gold badges4040 silver badges5151 bronze badges 4

• 1 Can't seem to reproduce that -> jsfiddle/1nhm2c4k – adeneo Commented Oct 31, 2016 at 9:18
• @adeneo made an edit to include another piece of code that I'm calling it from – The worm Commented Oct 31, 2016 at 9:25
• Can you show obj.makeHTMLMatchesTable and obj.fetchMatches? – user5066707 Commented Oct 31, 2016 at 9:27
• So, ... what ... ? – user5066707 Commented Oct 31, 2016 at 9:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You're trying to call the object that holds "messageUser" function, not the HTML element. For example:

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

Since you're adding event listeners in a loop, you need to create a function that binds an event listener.

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

You can place the function above before returning the object "table"