Is there other way to determine if the parent has a child using nextUntil expression of Jquery?

Question

I have problem, How can i insert to the database the untilNext expression of jquery? I have parent Item and Parent item with children.

I have here the Illustration of customer wish list of his item menu, as you can on the image,

The first parent item has no children,

The Second parent item has children

So now if the parent item has no children, the insertion will goes on this table.

The second logical inserting is, if the parent item has a children, the parent will insert here

the children of the parent will insert on this table

Here is my function for appending the item to that table in the illustration

  //function for getting the data from search product by clicking to the table row
  $('.append_customer_price_order').hide();
    $("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='condimentParent' 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>");

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

                    $(this).parent().parent().remove();
                 })
           }
           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='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>");

                   $.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(){

                    $parent = $(this).closest(".condimentParent");
                    $parent.add($parent.nextUntil(".condimentParent")).remove();

                  });







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


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

        }
      });

    });

My function in inserting the item in the database.

     $(document).ready(function () {
    $('#add_to_cart').click(function () {

      var customer_id = $('#hidden_customer_id').val();

      $('#noun_chaining_order').find('tr.editCondiments').each(function (i) {
        var $tds = $(this).find('td'),

          Qty = $tds.eq(0).text(),
          Item = $tds.eq(1).text(),
          Cost = $tds.eq(2).text();
          alert(Item);
      });
  });

});

Please don't use the terms "parent" and "child" like this. When talking about DOM elements, those words are used to refer to the element hierarchy. Table rows are not parents or children of each other. — Barmar, Apr 16 '19 at 05:59
Don't you remember that you confused someone in the last question? — Barmar, Apr 16 '19 at 06:01
You shouldn't call `$('button.removeorderWithCondi').click()` inside a loop. This will add multiple click handlers to all the remove buttons, because the selector matches the elements that were added on previous iterations. Read [Event binding on dynamically-created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) for the correct way to bind this handler. — Barmar, Apr 16 '19 at 15:54

Barmar · Answer 1 · 2019-04-16T16:00:46.053

0

$("table").on("click", ".count", function() {
  var parent = $(this).closest(".parent");
  console.log(parent.nextUntil(".parent").length + " children");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="parent">
    <td>This is parent #1</td>
    <td><button class="count">Count</button></td>
  </tr>
  <tr class="child">
    <td>This is a child of parent #1</td>
    <td>Column 2</td>
  </tr>
  <tr class="child">
    <td>This is another child of parent #1</td>
    <td>Column 2</td>
  </tr>
  <tr class="parent">
    <td>This is parent #2</td>
    <td><button class="count">Click</button></td>
  </tr>
  <tr class="parent">
    <td>This is parent #3</td>
    <td><button class="count">Click</button></td>
  </tr>
  <tr class="child">
    <td>This is a child of parent #3</td>
    <td>Column 2</td>
  </tr>
</table>

edited Apr 16 '19 at 16:00

answered Apr 16 '19 at 06:03

Barmar

596,455
48
393
495

do i need to use the .each function to get all the items? how it works in nextUntil? – DevGe Apr 16 '19 at 06:05
You can use `$parent.nextUntil(".condimentParent").each(...)`. There's nothing special about `.nextUntil()`, it's just another jQuery method that returns a collection of elements. You can use it just like any other collection. – Barmar Apr 16 '19 at 06:09
i use the .length to count to determine if has children. it return false, it alerting alert('No Children'); – DevGe Apr 16 '19 at 06:10
I've added a working snippet that shows that it should work. – Barmar Apr 16 '19 at 16:01

Is there other way to determine if the parent has a child using nextUntil expression of Jquery?

1 Answers1