Pessoal meu problema é um pouco difícil para eu explicar. Tenho esses buttons
que são adicionados toda vez quando é clicado no "+" e quando clica em algum desses button
eles removem a div
pai (.list-group-item
).
A questão é que eu só consigo atribuir essa função para esses botões direto no elemento html (onclick="removeField("+amntFileds+")"
) mas eu queria algo como:
document.querySelector(".remove-button").onclick=function(){...}
Infelizmente não consigo fazer isso pelo fato de que os botões são adicionados dinamicamente, e antes de adicioná-los, eles ainda não existem retornando o erro do seletor que não o encontra. Estou tentando usar este código em uma extensão para o Chrome, e não pode utilizar código inline...
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">✚</button><br>
<script type="text/javascript" src="action.js"></script>
querySelector
iria complicar.