還有其他方法使用jQuery刪除父表行和子表行

Question

我有關於刪除兩個表行的問題，一個是子表行和父表行，如何刪除父表和子表？

第一個追加是父表行，

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

    }
  });

});

Answer 1

給父級一個不同的類，例如condimentParent 。 然后，您可以使用jQuery的nextUntil()方法獲取當前父級和下一個父級之間的所有行。

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

Answer 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>");