Is there other way to remove both parent table row and child table row using Jquery

Question

I have question regarding removing both table row, one is the child table row and the parent table row, How can i remove both parent and children?

The first append is the parent table row,

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

So now after inserting the parent table row, there is a child table (I called this as Condiments in the product)

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

The Output like this.

In my onClick button remove

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

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

});

The whole function (Inserting and Appending in the table)

$("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

To solved the problem, I use the nextUntil expression of Jquery

This is the answer.

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

Answer 2

Give the parent a distinct class, e.g. condimentParent. Then you can use jQuery's nextUntil() method to get all the rows between the current parent and the next parent.

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