Delete tr and tr Jquery children

Question

I have a code in which I am trying to delete a contact and at the same time delete Other Email and Other Phone associated with it. However, now when I delete the contact Other Email and Other Phone stay.

That’s the code on the fiddle code:

// 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 want to change the delete-contact function to delete the provided and Other Email and Other Phone. I tried to use $(this). Closest('tr'). nextAll('tr'). remove(); however this way ends up deleting all contacts inferior to the parent.