Assign function to dynamically generated button

Question

Personal my problem is a little difficult for me to explain. I have these buttons which are added each time when it is clicked on the "+" and when it clicks on any of these button they remove the div father (.list-group-item).

The point is that I can only assign this function to these buttons directly in the html element (onclick="removeField("+amntFileds+")") but I wanted something like:

document.querySelector(".remove-button").onclick=function(){...}

Unfortunately I can’t do this because the buttons are added dynamically, and before adding them, they still don’t exist by returning the selector error that doesn’t find it. I’m trying to use this code in an extension to the Chrome, and cannot use inline code...

Refused to execute inline Event Handler because it violates the following Content Security Policy Directive: "script-src 'self' blob: filesystem: Chrome-Extension-Resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline Execution.

JS:

var amntFileds = 1;
var superObj = document.querySelector(".list-group");
var btnAdd = document.querySelector(".add-button");

btnAdd.onclick = function(){
   Element.prototype.setAttributes = function(attrs){
      for (var index in attrs){
         if ((index == 'styles' || index == 'style') && typeof attrs[index] == 'object'){
            for (var prop in attrs[index]){
               this.style[prop] = attrs[index][prop];
            }
         }else if (index == 'html'){
            this.innerHTML = attrs[index]
         }else{
            this.setAttribute(index, attrs[index]);
         }
      }
   };

   //Criando o elementos;
   var subObj = document.createElement("a");
   var inputRemove = document.createElement("button");

   //----------------Setando atributos dinamicamente-----------------\\
   //Definindo atributos ao subObj(div list-group-item):
   subObj.setAttributes({
      "id" : "sub-field"+amntFileds,
      "class" : "list-group-item"
   });

   //Definindo atributos ao inputRemove(Botão de exclusão de comandos)
   inputRemove.setAttributes({
      "type" : "button",
      "class" : "remove-button",
      "html" : "✘",
      //"onclick" : "removeField("+amntFileds+")"
   });
   //-----------------------------------------------------------------\\

   //Inserindo o elementos no subObj(list-group-item):
   subObj.appendChild(inputRemove);
   superObj.appendChild(subObj);
   amntFileds++;
}

function removeField(id){

   //Recebendo id de campo clicado
   var subObj = document.querySelector("#sub-field"+id); 

   //Removendo o DIV com id específico do nó-pai:
   var removed = superObj.removeChild(subObj);        

   //Decrementando campo adicionado em 1;
   amntFileds--;
   console.log("Campo "+amntFileds+" removido!");
}

HTML:

<div class="list-group">
</div>
<br><button type="button" class="add-button">&#10010;</button><br>
<script type="text/javascript" src="action.js"></script>

Answer 1

The easiest way to work with events in dynamically created elements is by using jQuery see:

$('body').on('click', '.uma-classe-qualquer', function(evt) {
    // aqui é possível pegar qualquer informação do elemento (id, data, etc...)
    alert($(this).attr('id'))
})

Already if the use of jQuery is not feasible in your project the way is to use addeventlistener in the elements you add dynamically example:

let inputRemove = document.createElement("button")
// adicione um "ouvinte"
inputRemove.addEventListener('click', function(evt) {
    // por exemplo para pegar o id:
    alert(this.id)
}, false)

Note that you can specify a function as a reference instead of declaring a:

// awesome function
function coolFunc(evt) {
    alert(this.id)
}
// handler
inputRemove.addEventListener('click', coolFunc, false)