Javascript - remove array index depending on row index

Question

I have a table where I can add text to it. every row is stored in an array.

1 row = 1 array

the table is a 2d array.

var table = [[1,2,3,4,5], [9,9,9,9,9]];

Look at this picture:

the first row is table[0]

[1,2,3,4,5]

and second is table1

[9,9,9,9,9]

Now I have a button that allow me to add 5 elements to the table (1 new row).

And this is added to the array table[] with a push. So if I add 5 things to my array. For example numbers 7,7,7,7,7. It looks like this:

table = [[1,2,3,4,5], [9,9,9,9,9], [7,7,7,7,7]];

Now, I have a delete button, that allows me to delete rows in the table.

This is my code. And it deletes the row my button is on:

var tableCell = document.createElement("td");           
            var newButton = tableCell.appendChild(document.createElement("button"));
            var buttonText = document.createTextNode("Remove");

        // THIS FUNCTION DELETES THE ROW
            newButton.onclick = function() { 



  //BEFORE I DELETE THE ROW, I WANT TO DELETE THE INDEX IN THE ARRAY TOO
//...........
                (this).closest('tr').remove();
            };

            newButton.appendChild(buttonText);
            ...

Now I wonder, how can I also delete the row from my array? I must some how find the row number I am on, and delete it from my array.

If i am on row number 2 in picture (9,9,9,9,9) which is index 1.

And I click "remove", i want it to delete index 1 in my array.

But how can I find what index to remove? I tried rowIndex but I don't know how to make it work with this...

table.splice(INDEX OF ROW,1)

how can I find what row my button I click on, is located on? And then use that to do something like:

table.splice(1,1)

this removes 1 array from index 1 in my 2d array

Answer 1

When you create the button add an id of "myid[ROWNUMBER]". In the event listener you can then do something like

 var value = parseInt((thid.id).replace('myId',''));

Then you can splice the row from you array.

Answer 2

You actually seem to be using Element.closest and node.remove which aren't supported in IE.

To find a <tr>'s index, you can get it's sibling <tr>s and then look for it amongst them

Here is how you might do it using Array.prototype.filter and Array.prototype.indexOf

var tr = this.closest('tr'),
    idx = Array.prototype.filter.call(this.parentNode.children, function (e) {return e.tagName === 'TR'}).indexOf(this);

tr.remove();
table.splice(idx, 1);

Please be aware that this may not give the expected results if you need to count more than immediate siblings, e.g. you're using many <tbody>s

Answer 3

If the button is direct child of the TD at the row, then in the buttons event handler something like this should work, if the performance is not issue...

  newButton.onclick = function() { 
    // ....
    var row = this.parentNode.parentNode, 
    rows = row.parentNode.querySelectorAll("tr"),
    index = 0;
    for( var r=0; r<rows.length; r++) {
        if(row==rows[r]) {
            index = r;
            break;
        }
    }
    console.log(index); // remove this index from array

Testing http://jsfiddle.net/11p3tt0n/

Answer 4

Methink simplest solution is use rowIndex property like

function createButton() {
  var btn = document.createElement('button');
  btn.type = 'button';
  btn.appendChild(document.createTextNode('Remove'));
  btn.onclick = function() {
    var row = this.closest('tr');
    table.splice(row.rowIndex,1);
    row.remove();
    printTable(table);
  }
  return btn;
}

var table = [
  [1, 2, 3, 4, 5],
  [9, 9, 9, 9, 9]
];

var t = document.getElementById('table');
var b = document.getElementById('add');
b.onclick = function() {
  var num = parseInt(Math.random() * 10),
    row = [num, num, num, num, num];

  table.push(row);
  createRow(t, row);
  printTable(table);
};

function printTable(t) {
  var tjson = document.getElementById('tablejson');
  tjson.innerHTML = JSON.stringify(t);
}

printTable(table);

function createButton() {
  var btn = document.createElement('button');
  btn.type = 'button';
  btn.appendChild(document.createTextNode('Remove'));
  btn.onclick = function() {
    var row = this.closest('tr');
    table.splice(row.rowIndex,1);
    row.remove();
    printTable(table);
  }
  return btn;
}

function createRow(table, cells) {
  var row = table.insertRow();
  cells.forEach(function(el) {
    var cell = row.insertCell();
    cell.innerHTML = el;
  });
  var btnCell = row.insertCell();
  btnCell.appendChild(createButton());
}

table.forEach(function(row) {
  console.log(t, row);
  createRow(t, row);
});

<table id="table">
</table>
<button id='add'>Add</button>
<pre id="tablejson"></pre>