CODEWITHSUNDEEP
javascripthtmlelementgetelementbyid
The worm
The worm

Reputation: 5888

Click event for dynamically created button

I have a function (seen at the very bottom) that creates a HTML table and depending on the contents of an array it will populate it with X number of rows. each row has 2 cells, the value of the array in that position and a button next to it.

I want to be able to click these buttons and delete the particular row from the table.

However, I cant use a standard on click event:

function unMatchButtonClicked(){
  var button = document.getElementById('unmatch').onclick;

}

Because it will throw an error that the id does not exist AND because I have potentially X number of rows, I'll need some sort of for loop.

My psuedo attempt is:

for (var i=0; i < table.length; i++){
  var button = document.getElementById('unmatch')
  if (button.clicked){
  remove row}
}

I can't quite vision how to do it though.

Only pure JS solutions as well please, no Jquery.

EDIT :

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);
    }
    return table;
}

Upvotes: 1

Views: 1541

Answers (3)

zer00ne
zer00ne

Reputation: 43880

The details are commented within the source. There's a PLUNKER available as well.

<!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.currentTarget (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>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Add event when you create elements using addEventListener() :

...
var button = document.createElement('button');
button.setAttribute("id", "unMatchButton" +i);

button.addEventListener("click", clickEventFunction, false);
...

Hope this helps.

function makeHTMLMatchesTable(array) {
  var table = document.createElement('table');
  table.setAttribute("border", 1);

  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);
    button.textContent = "Delete";

    //click Event 
    button.addEventListener("click", delete_row, false);
    
    cell.appendChild(button);
    row.appendChild(cell);
    table.appendChild(row);
  }

  return table;
}

function delete_row() {
    this.parentNode.parentNode.remove();
}

document.body.appendChild(makeHTMLMatchesTable(['Cell 1','Cell 2','Cell 3','Cell 4']));

Upvotes: 1

Andreas
Andreas

Reputation: 21881

Add a click handler on the <table>. You can then check the event.target if the click has been triggered by a <button>. If yes travel up the DOM until you reach the surrounding <tr> element and call .remove() on it.

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);
    button.textContent = "Remove";
    cell.appendChild(button);
    row.appendChild(cell);
    table.appendChild(row);
  }

  table.addEventListener("click", removeRow, false);

  return table;
}

function removeRow(evt) {
  if (evt.target.nodeName.toLowerCase() === "button") {
    evt.target.parentNode.parentNode.remove();  // .parentNode.parentNode == <tr>
  }
}

document.body.appendChild(makeHTMLMatchesTable([1, 2, 3, 4]));

Upvotes: 1

Related Questions