Remove the item when uncheck the parent checkbox in the form

I created a booking form and the URL is http://ift.tt/2v61OiD

the purpose of this form is to collect booking, when user click on the checkbox its addon appear (if any). its automatically make the dropbox select 1 item and add the selected checkboxed item in the total segment, and when user uncheck the field its removes the item from total segment.

but the issue is when user directly uncheck the parent checkbox... the child's data remain in the total segment. (all child items should removed from total when user uncheck the parent item).

HTML

<ul>
    <li>

        <label for="facial-dermaclear">

            <div class="parent">
                <span class="gp-input">
                    <input id="facial-dermaclear" type="checkbox" name="facial[0][name]" value="Dermaclear" class="parent-input" data-id="10" data-category="facial" data-price="2200">
                    <span class="label">Dermaclear</span>
                </span>
                    <span class="gp-price">
                    <span class="currency">Rs.</span>
                    <span class="price">2200</span>
                </span>
                <span class="gp-quantity">
                    <select name="facial[0][qty]">
                    <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>                                            </select>
                </span>
            </div>


            <div id="addon-dermaclear" class="addons-list child" style="display:none;">

                <h3 data-fontsize="16" data-lineheight="24">Addons</h3>
                <!-- child addons -->
                <ul class="addon-list">


                    <li>
                        <label for="">
                            <span class="gp-input">
                                <input name="facial[0][addon][]" type="checkbox" value="Extra Shoulder Massage (10 mins)" class="child-input" data-id="100" data-price="300" data-parent="dermaclear">
                                <span class="label">Extra Shoulder Massage (10 mins)</span>
                            </span>
                            <span class="gp-price">
                                <span class="currency">Rs.</span>
                                <span class="price">300</span>
                            </span>
                        </label>
                    </li>


                    <li>
                        <label for="">
                            <span class="gp-input">
                                <input name="facial[0][addon][]" type="checkbox" value="Hot Oil Head &amp; Shoulder Massage (15 min)" class="child-input" data-id="101" data-price="500" data-parent="dermaclear">
                                <span class="label">Hot Oil Head &amp; Shoulder Massage (15 min)</span>
                            </span>
                            <span class="gp-price">
                                <span class="currency">Rs.</span>
                                <span class="price">500</span>
                            </span>
                        </label>
                    </li>


                </ul> <!-- .addon-list ended -->

            </div>


        </label>

    </li>
</ul>

jQuery

  function total() {

      var total = new Array(),
          sum = 0;

      $('.cart-items li .price').each(function(i){
          total.push( $(this).text() );
          sum += parseFloat($(this).text()) || 0;
      });

      $('.cart-summary span.total').text(sum);

      return sum;

  }

  $('.accordion input[type="checkbox"]').on('change', function(){

      var $this = $(this),
          // thisLabel = $this.parent().parent('label'),
          thisLabel = $this.closest('label'),
          thisID = parseInt( $this.data('id') ),
          thisName = $this.val(),
          thisPrice = parseInt( $this.data('price') );

      if ( $this.is(':checked') ) {

          thisLabel.find('.addons-list').fadeIn();

          thisLabel.find('option[value="1"]').attr('selected', 'selected');
          $('.cart-items').append('<li id="'+thisID+'" class="item"><span class="left"><span class="title">'+thisName+'</span> x <span class="total-qty">1</span></span><span class="right"><span class="currency">Rs.</span><span class="price">'+thisPrice+'</span></span></li>');

          thisLabel.find('.gp-quantity select').on('change', function(){

              var $child = $(this),
                  addonQty = $child.find('option:selected').val(),
                  addonPrice = parseInt( addonQty * thisPrice );

              $('.cart-items li[id="'+thisID+'"]').find('.total-qty').text(addonQty);
              $('.cart-items li[id="'+thisID+'"]').find('.price').text(addonPrice);

              total();

          });

      } else {

          thisLabel.find('.addons-list').fadeOut();

          var textNew = thisLabel.find('option[value="0"]').attr('selected', 'selected');
          $('.cart-items li[id="'+thisID+'"]').remove();

          total();

      }

      total();

  });

All i want this to remove the child items (if any) in totals when user uncheck the parent item.