How to add a function to the button generated by JavaScript?

Question

I have a table in HTML that shows data about products. Well, in this table I want to add a button that allows the user to delete that product if he wishes, that button will be automatically generated together with the information in the table through JavaScript.

<!-- This is my table in HTML -->
<table id="tableVolume" border="1">
    <thead>
        <tr>
            <th>  Volume  </th>
            <th>  Serial Number  </th>
            <th>  Situation  </th>
            <th>  Delete  </th>
        </tr>
    </thead>
<tbody>
</tbody>
</table>

The table without information should look like this:

In JavaScript I have a function that will work with this table, one to add blank lines and another to add information, including the delete button.

// Function to add lines to a table
$scope.insertLines = function () {
    
    var tableS = document.getElementById("tableVolume");
    var numOfRowsS = tableS.rows.length;
    var numOfColsS = tableS.rows[numOfRowsS-1].cells.length;
    var newRowS = tableS.insertRow(numOfRowsS);

    for (var k = 0; k < numOfColsS; k++)
    {
        newCell = newRowS.insertCell(k);
        newCell.innerHTML = '&nbsp;';
    }
};

//Function to add informations to a table
$scope.infosnaTabelaSecun = function(number) {
    if (FindCodigo != null && matchTraco == null) {
        for (var k = 0; k < $scope.FindSerialNumber.length; k++) {
            tableVolume.rows[number+k+1].cells[0].innerHTML = volTotal;
            tableVolume.rows[number+k+1].cells[1].innerHTML = lines[(5+k)].substring(4); 
            tableVolume.rows[number+k+1].cells[2].innerHTML = "";
            tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";
        }
    }
    else if (matchTraco != null) {
        for (var k = 0; k < (lines.length - $scope.pularLnhs); k++) {
            tableVolume.rows[number+k+1].cells[0].innerHTML = volTotal;
            tableVolume.rows[number+k+1].cells[1].innerHTML = lines[($scope.pularLnhs+k)].substring(4);  
            tableVolume.rows[number+k+1].cells[2].innerHTML = "";
            tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";
        }
    }
};

The rest of the code doesn't matter much, so much so that there are names of variables and functions that I didn't give details. What matters to me is the line

tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";

where I add a button to each row in the table automatically. Well, I can add the button but I can't connect that button to a function, for example, when clicking the button it will delete the line where it is.

How would I do that? Link a function to this button that I created using JavaScript?

Answer 1

Event handlers specified as html attributes will look for javascript identifiers in the global scope. So in your present scenario, if DeleteSrlNumber() is declared globally, it should actually be called on click.

If you want to access identifiers that are non-global, then you could do something like this:

var button = document.createElement("button")
button.addEventListener("click", function() { 
   DeleteSrlNumber()
})
tableVolume.rows[number+k+1].cells[3].appendChild(button)

Note in this case that the identifiers, even though non-global, should still be in scope.

Answer 2

This is probably what you're looking for:

// Insert the button
tableVolume.rows[number+k+1].cells[3].innerHTML = 
    "<button class='button-one'><i class='fas fa-trash-alt'></i></button>";

// Get a reference to the button element (it's the first element of this cell) 
tableVolume.rows[number+k+1].cells[3].firstElementChild
// And assign a click listener that removes this row (but it can do whatever you want)
    .addEventListener("click", function() { 
        tableVolume.rows[number+k+1].remove();
    })

I've also made a live demo here https://jsfiddle.net/ecmoqtbf/14/.