javascript - 是否有其他方法使用 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();
});