是否有其他方法可以使用 Jquery 删除父表行和子表行答案

【问题标题】：Is there other way to remove both parent table row and child table row using Jquery是否有其他方法可以使用 Jquery 删除父表行和子表行
【发布时间】：2019-04-16 02:33:07
【问题描述】：

我有关于删除两个表格行的问题，一个是子表格行和父表格行，我如何删除父表格和子表格？

第一个追加是父表行，

$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");

所以现在插入父表行后，有一个子表（我在产品中称之为调味品）

 $("tbody#tbody_noun_chaining_order").
   append("<tr class='editCondiments'>\
   <td class='condiments_order_quantity'>"+Qty+"</td>\
   <td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
   <td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
   <td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
   </tr>");

这样的输出。

在我的 onClick 按钮中删除

$('button.removeorderWithCondi').click(function(){

   $(this).parent().parent().remove();

});

整个函数（在表格中插入和追加）

$("tr#productClicked").click(function () {

      var menu_name = $(this).closest("tr").find(".menu_name").text();
      var menu_price = $(this).closest("tr").find(".menu_price").text();
      var chain_id =  $(this).closest("tr").find(".chain_id").text();
      var menu_image = $(this).closest("tr").find(".menu_image").attr('src');



      swal({
      title: "Are you sure to add " + menu_name + " ?",
      text: "Once you will add it will automatically send to the cart",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    })
    .then((willInsert) => {
      if (willInsert) {
        swal("Successfully Added to your form.", {
          icon: "success",
        });

       $('.append_customer_price_order').show();

       // $('.append_customer_noun_order').append(menu_name);
       // $('.append_customer_price_order').append(menu_price);

       if(chain_id == 0) {

           $("tbody#tbody_noun_chaining_order").
              append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithOutCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
       }
       else
       {
          $.ajax({
            url:'/get_noun_group_combination',
            type:'get',
            data:{chain_id:chain_id},
            success:function(response){



               var noun_chaining = response[0].noun_chaining;

               $("tbody#tbody_noun_chaining_order").
              append("<tr class='editCondiments' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");

               $.each(noun_chaining, function (index, el) {

                var stringify_noun_chaining = jQuery.parseJSON(JSON.stringify(el));

                // console.log(stringify['menu_cat_image']);
                var Qty = stringify_noun_chaining['Qty'];
                var Condiments = stringify_noun_chaining['Condiments'];
                var Price = stringify_noun_chaining['Price'];
                var allow_to_open_condiments = stringify_noun_chaining['allow_to_open_condiments'];

                var condiments_section_id = stringify_noun_chaining['condiments_section_id'];


                 $("tbody#tbody_noun_chaining_order").
                append("<tr class='editCondiments'>\
                <td class='condiments_order_quantity'>"+Qty+"</td>\
                <td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
                <td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
                <td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
                </tr>");


              })


               $('button.removeorderWithCondi').click(function(){

                $(this).parent().parent().remove();

              });




            },
            error:function(response){
              console.log(response);
            }
          });
       }


      $('.tbody_noun_chaining_order').html('');

    }
  });

});

【问题讨论】：

如果你删除了父级，那么就没有子级要删除，因为子级是和父级一起删除的……你确定parent和child准确地描述了你的意图吗？跨度>
@JaromandaX 他不是在谈论 DOM 父/子关系。它们是表中的单独行，处于主/从关系中。
是的，当我单击按钮时，只有父项会自行删除，所以我想为此实现，如果我删除父项，子项也将是，我将分享我的新更新中的整个功能。
@Barmar ... rows in a table - 哦，对了... 糟糕的术语

标签： javascript jquery

【解决方案1】：

给父母一个不同的类，例如condimentParent。然后就可以使用jQuery的nextUntil()方法获取当前父节点和下一个父节点之间的所有行了。

$('button.removeorderWithCondi').click(function(){
    $parent = $(this).closest(".condimentParent");
    $parent.add($parent.nextUntil(".condimentParent")).remove();
});

【讨论】：

嗨@Barmar，所以在我的表格行中，我将添加一个 condimentParent 类？
我看起来像这样？
是的，谢谢解决了我的问题，非常感谢 Barmar

【解决方案2】：

为了解决这个问题，我使用了 Jquery 的 nextUntil 表达式

这就是答案。

$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");

【讨论】：