Delete closest tr and it's childs

Question

I have the following code where I can delete the closest tr using delete function, but I want to create another function called delete-contato where it would delete the closest tr and its children that is all "email" and "telefone" associated with that "contato".

$(wrapper).on("click", ".delete-contato", function(e) {
        e.preventDefault();
        $(this).closest('tr').empty();


        x--;
    })

This is the fiddle with the scenario and here's snippet:

 // funcao para adicionar um novo input no Contato $(document).ready(function() { var max_fields = 99; var wrapper = $(".container-contato"); var add_button = $(".add-contato"); var add_email = $(".add-email"); var add_telefone = $(".add-telefone"); var x = 1; $(add_email).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/> </td> <td> <a href="#" class="delete">Delete</a> </td> </tr> `) } }); $(add_telefone).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()" placeholder="Outro Telefone"/> </td> <td> <a href="#" class="delete">Delete</a> </td> </tr> `) } }); $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" class="nome" name="contato_rpps.nome['${x}']"/> </td> <td> <input type="text" name="contato_rpps.cargo['${x}']"/> </td> <td> <input type="text" name="contato_rpps.email['${x}']"/> </td> <td> <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()"/> </td> <td> <a href="#" class="delete-contato">Delete</a> </td> </tr> `); //add input box } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).closest('tr').empty(); x--; }) $(wrapper).on("click", ".delete-contato", function(e) { e.preventDefault(); x--; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-contato">Novo Contato &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <button type="button" class="add-email">Novo Email &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <button type="button" class="add-telefone">Novo Telefone &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div> <table> <tbody class="container-contato"> <tr> <td> <label><br>Nome</label> <input type="text" name="contato_rpps.nome['1']" class="nome"> <br> </td> <td> <label><br>Cargo</label> <input type="text" name="contato_rpps.cargo['1']" class="cargo"> </td> <td> <label><br>Email</label> <input type="email" name="contato_rpps.email['1']" class="email"> </td> <td> <label><br>Telefone</label> <input type="text" class="telefone" placeholder="(00) 90000-0000" onkeyup="phoneMask()" name="contato_rpps.telefone['1']" maxlength="15"> </td> </tr> </tbody> </table> </div>

I don't think i explained what i want cleary so.. when you press Novo Contato a new set of inputs is created and then you press Novo Email or Novo Telefone. So after press delete on Contanto i want all those new inputs to be deleted. Nome, Cargo, Email, Telefone and others Outros Emails and Outros Telefone generated.

Right now when you delete Contato, Outro Telefone and Outro Email stays.

Answer 1

You need to assign identifiers to the child rows. I did so for the email contact which you can see in my fiddle below. You need to apply the same methods to your phone button click.

Notice I added "data-row-id" to your TRs and class names to link rows with it's parents.

Working Fiddle: https://jsfiddle.net/54uLrj8k/

 $(document).on("click", ".delete-contato", function(e) {
    e.preventDefault();
    $btn = $(this)
    $tr = $(this).closest('tr');
    $id = $tr.attr('data-row-id');
    $('.child-row-' + $id).remove();
    $tr.remove();

    x--;
  });

 $(add_email).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $lastContact = $('tbody.container-contato tr.row-main:last');
      $id = $lastContact.attr('data-row-id');

      $(wrapper).append(`
        <tr class="child-row child-row-${$id} email-row" data-row-id="${$id}">
          <td>
            <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>        
      `)
    }
  });

Answer 2

Use .parents('tr') and remove it !

 // funcao para adicionar um novo input no Contato $(document).ready(function() { var max_fields = 99; var wrapper = $(".container-contato"); var add_button = $(".add-contato"); var add_email = $(".add-email"); var add_telefone = $(".add-telefone"); var x = 1; $(add_email).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/> </td> <td> <a href="#" class="delete">Delete</a> </td> </tr> `) } }); $(add_telefone).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()" placeholder="Outro Telefone"/> </td> <td> <a href="#" class="delete">Delete</a> </td> </tr> `) } }); $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(` <tr> <td> <input type="text" class="nome" name="contato_rpps.nome['${x}']"/> </td> <td> <input type="text" name="contato_rpps.cargo['${x}']"/> </td> <td> <input type="text" name="contato_rpps.email['${x}']"/> </td> <td> <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()"/> </td> <td> <a href="#" class="delete-contato">Delete</a> </td> </tr> `); //add input box } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).closest('tr').empty(); x--; }) $(wrapper).on("click", ".delete-contato", function(e) { e.preventDefault(); $(this).parents('tr').remove() x--; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-contato">Novo Contato &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <button type="button" class="add-email">Novo Email &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <button type="button" class="add-telefone">Novo Telefone &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div> <table> <tbody class="container-contato"> <tr> <td> <label><br>Nome</label> <input type="text" name="contato_rpps.nome['1']" class="nome"> <br> </td> <td> <label><br>Cargo</label> <input type="text" name="contato_rpps.cargo['1']" class="cargo"> </td> <td> <label><br>Email</label> <input type="email" name="contato_rpps.email['1']" class="email"> </td> <td> <label><br>Telefone</label> <input type="text" class="telefone" placeholder="(00) 90000-0000" onkeyup="phoneMask()" name="contato_rpps.telefone['1']" maxlength="15"> </td> </tr> </tbody> </table> </div>

Answer 3

You can remove the parent "tr" by using .parents('tr')

 $(wrapper).on("click", ".delete", function(e) {
     e.preventDefault();
     $(this).parents('tr').remove();    
     x--;
  });

$(wrapper).on("click", ".delete-contato", function(e) {
    e.preventDefault();
    //$(this).closest('tr').remove(); // this will also work
    $(this).parents('tr').remove(); // // this will also work 
    x--;
  })