Javascript 删除最近的tr及其'；孩子们

我有以下代码，我可以使用delete函数删除最近的tr，但我想创建另一个名为delete contato的函数，它将删除最近的tr及其子项，这些子项都是与“contato”关联的“email”和“telefone”

这是一把小提琴，下面是一个片段：

//funcao para adicionar um novo input no Contato
$（文档）.ready（函数（）{
var max_字段=99；
var包装器=$（“.container contato”）；
var add_按钮=$（“.add contato”）；
var add_email=$（“.add email”）；
var add_telefone=$（“.add telefone”）；
var x=1；
$（添加电子邮件）。单击（功能（e）{
e、 预防默认值（）；
如果（x

诺沃康塔托酒店
+ 
诺沃电子邮件
+ 
诺沃电信
+ 

诺姆



货物

电子邮件

电传
您需要为子行分配标识符。我这样做是为了电子邮件联系，你可以在我的小提琴下面看到。您需要对手机按钮单击应用相同的方法

注意，我在TRs和类名中添加了“数据行id”，以将行与其父级链接起来

工作小提琴：

$（文档）。在（“单击“，”上。删除contato“，函数（e）{
e、 预防默认值（）；
$btn=$（此）
$tr=$（this.closest（'tr'）；
$id=$tr.attr（'data-row-id'）；
$（'.child行-'+$id）.remove（）；
$tr.remove（）；
x--；
});
$（添加电子邮件）。单击（功能（e）{
e、 预防默认值（）；
如果（x
使用
.parents（'tr'）
并删除它


//funcao para adicionar um novo input no Contato
$（文档）.ready（函数（）{
var max_字段=99；
var包装器=$（“.container contato”）；
var add_按钮=$（“.add contato”）；
var add_email=$（“.add email”）；
var add_telefone=$（“.add telefone”）；
var x=1；
$（添加电子邮件）。单击（功能（e）{
e、 预防默认值（）；
如果（x

诺沃康塔托酒店
+ 
诺沃电子邮件
+ 
诺沃电信
+ 

诺姆



货物

电子邮件

电传
您可以使用
.parents（'tr'）

所以，不仅仅是将
.empty（）
更改为
.remove（）
？还是我误解了你的意思？顺便说一句，为什么？var add_email=$（“.add email”）$（添加电子邮件）。单击（…而不是添加电子邮件。单击（…我不认为我清楚地解释了我想要什么。当你按下Novo Contato时，会创建一组新的输入，然后你按下Novo Email或Novo Telefone。所以在按下Contanto上的delete之后，我希望所有这些新输入都被删除。Nome、Cargo、Email、Telefone和其他Outros电子邮件和Outros Telefone生成。@rodrigo Eash row拥有自己的delete，我不明白你想点击哪一个来删除所有的！这是一个蓝色背景的。我还发现$（this.nest（'tr'）。next（'tr'）。remove（）；…删除下一个tr，所以我现在缺少的是如何删除所有的nexts tr，然后删除“contato”…我明白你在做什么
$(wrapper).on("click", ".delete-contato", function(e) {
        e.preventDefault();
        $(this).closest('tr').empty();


        x--;
    })


 $(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>        
      `)
    }
  });

 $(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--;
  })