0

Criei a minha tabela desta forma com botão para adicionar e eliminar linhas:

function addAgregado(){ 
    $("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); 
} 
    
$("#tbUser").on('click', '.remover_campo', function() {
  $(this).parents('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hs_firstname field hs-form-field">
        
          <label for="educacao">Composição do Agregado Familiar (Parentesco, Nome e Idade) <span style="color: red;">*</span></label>

          <button type="button" class="hs-button primary large" onclick="addAgregado()" >Adicionar Familiar</button>
          
        </div>
         <div class="hs_firstname field hs-form-field" id="riscos">
     
     </div>
     
     <div id="riscoform" > 
            <table class="campo" cellspacing="10" id="tbUser"> 
            <tr class="elimininput">
            <td style="display: none;">
                <div class="hs_firstname field hs-form-field">

                    <label for="IdAgreg">Id </label>
                    
                    <input name="IdAgreg[]" type="text" >

                </div>

            </td> 
            <td>
                <div class="hs_firstname field hs-form-field">

                    <label for="Parent">Parentesco </label>

                    <input name="Parent[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div>

            </td> 
            <td> 
                <div class="hs_firstname field hs-form-field">

                    <label for="ParentNome">Nome </label>

                    <input name="ParentNome[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div> 
            </td> 
            <td>
                <div class="hs_firstname field hs-form-field">

                    <label for="ParentIdade">Idade </label>

                    <input name="ParentIdade[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div> 
            </td>
            <td><button class="remover_campo"><i class="fa fa-trash"></i></button></td> 
            </tr> 
                
            </table> 

            </div>

Se só adicionar linhas funciona corretamente, o problema é quando elimino linhas. Depois de eliminar uma linha nem consigo adicionar nem eliminar mais linhas.

1
  • 1
    Bruno, vc está fazendo clone de um div que tem elementos com ID, e o ID deve ser único, isso está errado. Para além disso, se criou um novo evento, precisa atribuir o evento click, os eventos não são copiados quando faz o append Commented 12/05/2021 às 17:43

2 Respostas 2

2

Ao fazer essa linha: $("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); está clonando o que exite na div "riscoform". Note que logo no início tem uma table com ID, e não podevia haver mais de um elemento com o mesmo ID no DOM, isso não está bom.

O idela seria mudar isso, e logo vai ter que mudar esse seletor: $("#tbUser").

Pode então remover o ID e usar a classe no seletor mas, como está clonando da uma linha existente, os métodos remove() um momento vão remover todas as linhas, o que vai impossibilitar de clonar, então deve adicionar uma proteção, por exemplo contando os elementos ainda restantes e não remover ser for menor ou igual a 1, por exemplo elementos com a class "remover_campo".

Adaptei o código com essas alterações:

function addAgregado() {
    $("#riscos").append("<div>" + $("#riscoform").html() + "</div>");

    // no lugar o id, usei elemento+class e associa o evento
    $("table.campo").on('click', '.remover_campo', function() {
        // se for o único elemento restante, não remove
        if ($('.remover_campo').length > 1) {
            $(this).parents('tr').remove();
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hs_firstname field hs-form-field">

    <label for="educacao">Composição do Agregado Familiar (Parentesco, Nome e Idade) <span style="color: red;">*</span></label>

    <button type="button" class="hs-button primary large" onclick="addAgregado()">Adicionar Familiar</button>

</div>
<div class="hs_firstname field hs-form-field" id="riscos">

</div>

<div id="riscoform">
    <table class="campo" cellspacing="10">
        <tr class="elimininput">
            <td style="display: none;">
                <div class="hs_firstname field hs-form-field">

                    <label for="IdAgreg">Id </label>

                    <input name="IdAgreg[]" type="text">

                </div>

            </td>
            <td>
                <div class="hs_firstname field hs-form-field">

                    <label for="Parent">Parentesco </label>

                    <input name="Parent[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div>

            </td>
            <td>
                <div class="hs_firstname field hs-form-field">

                    <label for="ParentNome">Nome </label>

                    <input name="ParentNome[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div>
            </td>
            <td>
                <div class="hs_firstname field hs-form-field">

                    <label for="ParentIdade">Idade </label>

                    <input name="ParentIdade[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                </div>
            </td>
            <td><button class="remover_campo"><i class="fa fa-trash"></i></button></td>
        </tr>

    </table>

</div>

2
  • 1
    "Depois de eliminar uma linha nem consigo adicionar nem eliminar mais linhas..." ainda tá com esse problema no seu codigo. Mas sobre o código da pergunta, ele tá complexo demais para uma coisa tão simples, não acha? Commented 12/05/2021 às 19:17
  • Vou dar o +1 porque funciona se remover o primeiro, mas se for essa a intencao, tá muito estranho. Commented 12/05/2021 às 19:20
1

Inicialmente tem que ser observado que o código apresentado na pergunta possui um problema grave com os atributos id. Segue trecho da documentação:

O atributo global id define um identificador exclusivo (ID) que deve ser único por todo o documento. Seu objetivo é identificar o elemento ao navegar por âncoras (usando um identificador de fragmento), quando utilizar scripts ou estilizando (com CSS).

Até o momento os navegadores não impõe restrições a violação dessa regra de ids único permitindo que sites continuem funcionando fora do padrão HTML5.1, porém como já aconteceu no passado, e é comum acontecer, conforme os fabricantes de navegadores direcionam suas infraestruturas as normas W3C muitos sites deixam de funcionar sem qualquer aviso, deixando aquela sensação de que ontem tudo funcionava bem mas ao acordar estava tudo dando errado.
Para solucionar essa questão removi todos os ids e reposicioneis os elementos quanto aos <label>s, pois como se trata de clones de elementos e funções compartilhadas acredito ser melhor o código não depender desses.

Segundo ponto as ser observado é essa função:

$("#tbUser").on('click', '.remover_campo', function() {
  $(this).parents('tr').remove();
});

Ela instrui ao navegador adicionar o evento click num elemento cujo a classe é remover_campo e seja filho de dum elemento cujo o id é tbUser.
Acontece que essa realização de instrução da forma que foi feita ocorre apenas uma vez durante o carregamento do arquivo e é só aplicada aos elementos que estejam presente no Modelo de Objeto do documento no momento em que código é executado.
Também há outro problema, a função da forma que está escrita remove apenas os elementos visíveis no navegador porém os containers daqueles controles permaneciam na estrutura página.
Novamente como se trata de clones de elementos e funções compartilhadas, removi a função e passei sua funcionalidade para addAgregado() que agora além de adicionar outro conjunto de elemento a página, também insere o evento de remoção dos containers cujo o controle está inserido.

Fiz uma modificação semântica no documento, ao invés de manter o <div id="riscoform"> dentro do corpo do documento(elemento ) a transferi para o cabeçalho da página(elemento ) dentro de um , segue a documentação:

O elemento HTML é um mecanismo para encapsular um conteúdo do lado do cliente que não é renderizado quando a página é carregada, mas que pode ser instanciado posteriormente em tempo de execução usando JavaScript.

Pense no template como um fragmento de conteúdo, que é armazenado para um possível uso futuro no documento. Enquanto o parser processa o conteúdo do elemento ao carregar a página, isso apenas garante que o conteúdo é válido; porém, o conteúdo do elemento ainda não foi renderizado.

Tornando o corpo do documento mais legível e mais fácil a manutenção no template.

function addAgregado() {  
  $("#riscos").append($("#riscoform").html()).on('click','.remover_campo', function(e){
    $(event.target).parents('table').remove();
  });  
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">      
    <title>Riscoform</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <template id="riscoform">
       <div>
         <table class="campo" cellspacing="10">
            <tr class="elimininput">
              <td style="display: none;">
                <div class="hs_firstname field hs-form-field">
                  <label>Id<input name="IdAgreg[]" type="text"></label>
                </div>
              </td>
              <td>
                <div class="hs_firstname field hs-form-field">
                  <label>Parentesco
                    <input name="Parent[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                       <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                       </span>
                  </label>
                </div>
              </td>
              <td>
                <div class="hs_firstname field hs-form-field">
                  <label for="ParentNome">Nome
                    <input name="ParentNome[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                    <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                    </span>
                  </label>
                </div>
             </td>
             <td>
               <div class="hs_firstname field hs-form-field">
                 <label for="ParentIdade">Idade
                   <input name="ParentIdade[]" required="required" type="text" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório">
                   <span class="error1" style="display: none;">
                        <i class="error-log fa fa-exclamation-triangle"></i>
                   </span>
                 </label>
               </div>
             </td>
             <td><button class="remover_campo"><i class="fa fa-trash"></i></button></td>
           </tr>
         </table>
       </div>    
     </template>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="hs_firstname field hs-form-field">
        <label for="educacao">Composição do Agregado Familiar (Parentesco, Nome e Idade) <span style="color: red;">*</span></label>
        <button type="button" class="hs-button primary large" onclick="addAgregado()">Adicionar Familiar</button>
   </div>
   <div class="hs_firstname field hs-form-field" id="riscos"></div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .