JSFiddle - React, Tailwind, and code Playground
HTML
<div class="funcionario">
<div> Funcionario:
<div class="nome"></div>
<button class="alternome">Alterar nome</button>
</div>
<div> Salario: R$
<div class="salario"></div>
<button class="aumenta">+</button>
<button class="abaixa">-</button>
</div>
<div class="ui-buttons">
<button data-action="adicionar">Adicionar novo functionario</button>
<button data-action="editar">Editar functionario</button>
<button data-action="remover">Remover functionario</button>
</div>
</div>
CSS
.funcionario {
padding: 20px;
}
JavaScript
function editarFuncionario(el) {
//altera div func
var f = el.querySelector('.nome');
var s2 = f.innerHTML;
f.innerHTML = prompt("Qual o nome do funcionario??");
//pos-alteramento de nome
var a = el.querySelector(".alternome");
a.onclick = function alternome() {
f.innerHTML = prompt("Qual o nome atual?");
};
//altera div salario
var n = el.querySelector(".salario");
var s1 = n.innerHTML;
n.innerHTML = prompt("Qual o salario?");
//aumenta valor
var m = el.querySelector(".aumenta");
m.onclick = function aumenta() {
n.innerHTML = (Number(n.innerHTML) || 0) + 100;
};
//decrementa valor
var o = el.querySelector(".abaixa");
o.onclick = function abaixa() {
n.innerHTML = (Number(n.innerHTML) || 0) - 100;
};
}
function removerFuncionario(el) {
el.parentElement.removeChild(el);
}
function adicionarFuncionario(el) {
var novo = el.cloneNode(true);
el.parentElement.appendChild(novo);
auscultador(novo);
}
function closest(el, selector) {
while (el && !el.matches(selector)) {
el = el.parentElement;
}
return el;
}
function auscultador(el) {
var buttons = el.querySelectorAll('.ui-buttons');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(e) {
var el = closest(e.target, '.funcionario');
var action = e.target.dataset.action;
if (action == 'editar') return editarFuncionario(el);
if (action == 'remover') return removerFuncionario(el);
if (action == 'adicionar') return adicionarFuncionario(el);
});
}
}
auscultador(document.body);