Insert onclick event into dynamically created input

2

I have a table where the user can insert a row in the table and then delete it if necessary. To do this, when it adds a row, in the second cell I enter two cells. One contains the content and the other a dynamically created button. My problem is in this button. When I enter 1 line, it deletes correctly. But if I enter more than 1 line, it always deletes the last one that was entered. It seems that the onclick event always keeps the parameters of the last line inserted. The code that creates this input and add the event:

        function inclui_item_extra(itemExtra, origem){
            var tabela      = '';
            var prod        = '';
            var idInput     = '';
            var idItemExtra = 0;
            switch(origem){
                case 'p1'   :
                    tabela  = 'tab_item_extra1';
                    idInput = 'produto';
                    prod = document.getElementById(idInput).value;
                    break;
                case 'p2'   :
                    tabela = 'tab_item_extra2';
                    idInput = 'produto2';
                    prod = document.getElementById(idInput).value;
                    break;
                case 'p3'   :
                    tabela = 'tab_item_extra3';
                    idInput = 'produto3';
                    prod = document.getElementById(idInput).value;
                    break;
                case 'p4'   :
                    tabela = 'tab_item_extra4';
                    idInput = 'produto4';
                    prod = document.getElementById(idInput).value;
                    break;
                default     :
            }
            prod = prod.split("|");
            if(prod.length == 2){
                var itemExtra   = itemExtra.split("|");


                id = gera_id(itemExtra[0].replace(' ', ''));
                var table       = document.getElementById(tabela);
                var row         = table.insertRow(0);
                row.id          = id;
                var cell1       = row.insertCell(0);
                var cell2       = row.insertCell(1);
                cell1.innerHTML = itemExtra[1];

                var deletaExtra = document.createElement("INPUT");
                deletaExtra.setAttribute("type", "button");
                deletaExtra.onclick = function (){
                    deletaItemExtra(id, tabela);
                }
            /*  
                deletaExtra.addEventListener("click", function(){
                    deletaItemExtra(id, tabela);
                });
            */
                deletaExtra.setAttribute("value", 'X');
                cell2.appendChild(deletaExtra);

            }else{
                document.getElementById(origem).value = '';
                document.getElementById(idInput).focus;
                alert("Produto não informado.");
            }
        }

        function deletaItemExtra(item, tabela){
            var x = document.getElementById(item);
            var id = x.id;
            //x.deleteRow(0);
            //x.parentElement.removeChild(x);
                var tab = document.getElementById(tabela);
                var linhas = tab.rows;
                var conta = 0;
                while(linhas[conta]){
                    if(id == linhas[conta].id){
                        alert(linhas[conta].id +" -- achei e vou deletar");
                        document.getElementById(tabela).deleteRow(conta);
                    }
                    conta++;
                }
        /*
                var z = document.getElementById(tabela).rows.length;
                var y = 0;
                for(y =z-1; y >= 0; y--){
                    alert('-'+ document.getElementBy.row(y).id);
                    if(item == x.row(y).id){
                        document.getElementById(tabela).deleteRow(y);
                    }

                }
        */
            if(document.getElementById(item) != null){
                alert('Ainda é encontrado no sistema'); 
            }else{
                alert('Foi totalmente deletado do sistema'); 
            }
        }

I tried to directly add the event to onclick and also with the addEventeListener function but the two have the same result. I have a function that does not allow duplicate ids. Here is the code:

function gera_id(ie) {
  var idExiste = false;
  var id = 0;
  while (idExiste == false) {
    id = "ie" + Math.floor((Math.random() * 10000) + 1) + '_' + ie;

    if (document.getElementById(id) == null) {
      idExiste = true;
    }
  }
  return id;
}
    
asked by anonymous 27.07.2017 / 15:05

0 answers