How to add and remove rows and columns in html table with jquery

Question

I have a table where I allow the user to insert/remove rows when they find it necessary, but what I need and am not able to adapt is to insert a block of Columns and Rows, but without success, I will try to show you what I have. I have this table:

I’m trying to add this whole block when the user clicks on Adicionar Linha, I have already made some searches and found nothing similar and my knowledge in Jquery is little, almost nothing.

The skeleton of the table is like this:

<table width="60%" border="1" id="tabela-herdeiro" class="table">
<tbody>
    <tr>
        <td width="8%">Nome</td>
        <td width="23%">&nbsp;</td>
        <td width="10%">Nacionalidade</td>
        <td width="27%">&nbsp;</td>
        <td width="10%">Estado Civil</td>
        <td width="22%">&nbsp;</td>         
    </tr>
    <tr>
        <td>Residência</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Cônjuge</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="6" align="right"><button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRowPessoa(this)" type="button">Remover</button></td>
    </tr>       
</tbody>

  Add Line

The Jquery that inserts lines is this:

   (function($) {

    RemoveTableRowPessoa = function(handler) {
      var tr = $(handler).closest('tr');

      tr.fadeOut(400, function(){ 
        tr.remove(); 
      }); 

      return false;
    };



    AddTableRowPessoa = function() {

        var newRow = $("");
        var cols = "";

        cols += 'Nome  Nacionalidade  Estado Civil  RG  CPF  Residênvia  Cônjuge  RG Cônjuge  CPF Cônjuge ';

        cols += '';
        cols += 'Remover';
        cols += '';

        newRow.append(cols);

        $("#tabela-herdeiro").append(newRow);

        return false;
    };          



   })(jQuery);  

But I couldn’t adapt, like I said

Answer 1

Do not use onclick on the button, because it will not work because the function called by the event is outside the scope, inside (function($){.

What you can do is create an Event Handler by pointing to the button and in the function of that event remove the respective block:

$(document).on("click", "#tabela-herdeiro button", function(){
   // REMOVER O BLOCO
});

Clicking the "remove" button will remove the TBODY where the button is.

To add a new block, on page loading, create a copy (not clone) of the HTML of TBODY and save to a variable:

var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

Whenever you want to add a new TR’s block, just make a .append of copia on the table.

For the "Add" button, also create an Event Handler:

$("#adicionar").on("click", function(){
    $("#tabela-herdeiro").append(copia);
});          

Let’s see it working:

$(function(){

   // já cria logo uma cópia do TBODY original
   var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

    $(document).on("click", "#tabela-herdeiro button", function(){

      var tr = $(this).closest("tbody");
      
      tr.fadeOut(400, function(){
        this.remove(); 
      }); 

    });

    $("#adicionar").on("click", function(){
        $("#tabela-herdeiro").append(copia);
    });          

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="60%" border="1" id="tabela-herdeiro" class="table">
<tbody>
    <tr>
        <td width="8%">Nome</td>
        <td width="23%">&nbsp;</td>
        <td width="10%">Nacionalidade</td>
        <td width="27%">&nbsp;</td>
        <td width="10%">Estado Civil</td>
        <td width="22%">&nbsp;</td>         
    </tr>
    <tr>
        <td>Residência</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Cônjuge</td>
        <td>&nbsp;</td>
        <td>RG</td>
        <td>&nbsp;</td>
        <td>CPF</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="6" align="right"><button class="btn btn-large btn-danger btn-xs" type="button">Remover</button></td>
    </tr>       
   
</tbody>
</table>
<br>
<button id="adicionar">Adicionar linha</button>