0
I made a method to remove an item from my table HTML which is supplied by a standard form but the information goes to the table in question... Until then everything normal, but when removing a new item, other than what was previously registered, does not remove.
Here’s my project with the bug, hosted for you to take a look at what I’m talking about: https://wesleyvicen1535.000webhostapp.com/CadastroPaciente.html
So far so quiet, the script quietly removes items with the class "remove", but the new implemented items do not. They can inspect element that will show that the new ones are going with the class.
My repository on Github with the source code: https://github.com/wesleyvicen/ProjetoWebOdontologia
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);
};
Wesley, this happens because the element was not rendered when the page was loaded, on the contrary, you created the same after the whole process, to solve, you must define the event within the function
adicionar_cadastrosee:td_remover.addEventListener('dblclick' ...– NoobSaibot
I understood what you said, but I don’t understand how I can solve @Noobsaibot
– Wesley Vicente
Thank you very much, solved my problem, but is there any way to call again the method without being repeating code?
– Wesley Vicente
Yes, you can create a function and pass it:
td_remover.addEventListener('dblclick', funcaoParaRemover);, just have to changetd_remover.parentNode.remove();forthis.parentNode.remove();– NoobSaibot
Wesley welcome, as a new user, it is important to know how the site works, I recommend you read the [tour] and if you need help on how to use the tool, go to [help].
– NoobSaibot
See here the example of as I said earlier.
– NoobSaibot
Thank you very much, you helped me a lot
– Wesley Vicente