I made a method to remove an item from my table made in HTML that is supplied by a normal form but the information goes to the table in question ... Until then everything normal, but at the time of removing a new item, other than the one previously registered, does not remove it.
Here is my project with the error, hosted for you to take a look at what I'm talking about: link
So far so peaceful, script quietly removes items with the class "remove" , but new deployed items do not. They can inspect element that will show that the new ones are going with the class.
My repository in Github with source code: link
Remove method:
var removerTds = document.querySelectorAll('.remover');
removerTds.forEach(function (item) {
item.addEventListener('dblclick', function () {
var confirmacao = confirm('Deseja realmente remover este item?')
if (confirmacao) {
item.parentNode.remove();
}
})
});
Implements the table:
var botao_cadastrar = document.querySelector("#btn_cadastrar");
botao_atendimento.addEventListener("click", function () {
event.preventDefault();
adicionar_atendimento();
});
function adicionar_cadastro() {
var nome = document.querySelector('#nome').value;
var sobrenome = document.querySelector('#sobrenome').value;
var cpf = document.querySelector('#cpf').value;
var endereco = document.querySelector('#endereco').value;
var numero = document.querySelector('#numero').value;
var bairro = document.querySelector('#bairro').value;
var cep = document.querySelector('#cep').value;
var cep2 = document.querySelector('#cep2').value;
var uf = document.querySelector('#uf').value;
var cidade = document.querySelector('#cidade').value;
var municipio = document.querySelector('#municipio').value;
var tabela = document.querySelector(".tabelaCadastroCliente");
var linha = document.createElement('tr');
var td_nome = document.createElement('td');
var td_sobrenome = document.createElement('td');
var td_cpf = document.createElement('td');
var td_endereco = document.createElement('td');
var td_numero = document.createElement('td');
var td_bairro = document.createElement('td');
var td_cep = document.createElement('td');
var td_uf = document.createElement('td');
var td_cidade = document.createElement('td');
var td_municipio = document.createElement('td');
var td_remover = document.createElement('td');
td_nome.textContent = nome +' '+ sobrenome;
td_cpf.textContent = cpf;
td_endereco.textContent = endereco;
td_numero.textContent = numero;
td_bairro.textContent = bairro;
td_cep.textContent = cep +'-'+ cep2;
td_uf.textContent = uf;
td_cidade.textContent = cidade;
td_municipio.textContent = municipio;
td_remover.textContent = 'Remover';
td_remover.classList.add('remover')
linha.appendChild(td_nome);
linha.appendChild(td_cpf);
linha.appendChild(td_endereco);
linha.appendChild(td_numero);
linha.appendChild(td_bairro);
linha.appendChild(td_cep);
linha.appendChild(td_uf);
linha.appendChild(td_cidade);
linha.appendChild(td_municipio);
linha.appendChild(td_remover);
tabela.appendChild(linha);
};