SO40039812

    <!DOCTYPE html>
    <html>

    <head>
      <style>
        table,
        td {
          border: 1px solid red;
        }
        button {
          height: 24px;
          width: 24px;
        }
      </style>
    </head>

    <body>

      <script>
        var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        function makeHTMLMatchesTable(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 button = document.createElement('button');
            button.setAttribute("id", "unMatchButton" + i);
            cell.appendChild(button);
            row.appendChild(cell);
            table.appendChild(row);
          }
          // This is added to comlete this function
          return document.body.appendChild(table);
        }

        makeHTMLMatchesTable(array1);

         // Reference table
        var table = document.querySelector('table');

        /*
        | - Add an eventListener for ckick events to the table
        | - if event.target (element clicked; i.e. button) 
        |   is NOT the event.currentTaeget () (element that
        |   is listening for the click; i.e. table)...
        | - ...then assign a variable to event.target's
        |   id (i.e. #unMatchButton+i)
        | - Next extract the last char from the id (i.e. from
        |   #unMatchButton+i, get the 'i')
        | - Then convert it into a real number.
        | - Determine the row to which the button (i.e. event
        |   .target) belongs to by using the old rows method.
        | - while row still has children elements...
        | - ...remove the first child. Repeat until there are
        |   no longer any children.
        | - if the parent of row exists (i.e. table which it 
        |   does of course)...
        | - ...then remove row from it's parents
        */
        table.addEventListener('click', function(event) {
          if (event.target !== event.currentTarget) {
            var clicked = event.target.id;
            var i = clicked.substr(-1);
            var idx = Number(i);
            var row = this.rows[idx];
            while (row.children > 0) {
              row.removeChild(row.firstChild);
            }
            if (row.parentNode) {
              row.parentNode.removeChild(row);
            }
            return false
          }
        }, false);
      </script>
    </body>


    </html>