Как добавить/удалить элемент в блок?

Question

[xakslim]

Приветствую всех. Задача такая: есть список опций товара(название цена), при выборе товара считается цена и в итоговом блоке(находится на этой же странице) добавляется список выбранных опций. С пересчетом цены разобрался. Когда выбираю элемент он добавляется в итоговый блок, но когда отменяю опцию - он остается

js:

function optionPush() {
  var optionVal = [];
  var optionUrl = '';
  var optionList = '';

  $('.option-btn.is-selected').each(function () {
     optionVal.push($(this).data('id'));
  });

  if (optionVal.length) {
    optionUrl = optionVal.join(',');
    optionList += '<li class="review-page--line-item" data-code="$SPT31"><span class="label--option">' +
              ($('.option-btn.is-selected').find('.group--options_checkbox--name')).text() + '</span></li>'
  } else {
    $('#options-ids').val('');
    optionList = '';
    return
  }

  if (optionList) {
    $('.total-review-list').append(optionList);
  }

  if (optionUrl) {
    $('#options-ids').val(optionUrl);
  }
}


$('.option-btn').on('click', function () {
  $(this).toggleClass('is-selected');
  ($(this).find('.icon-checkbox--blue')).toggleClass('is-selected');
  calcLoop();
  optionPush();
});

блок с опциями:

{%- for option in options -%}
                            <div class="group--option-wrapper">
                              <div class="group--options_card--checkbox--container option-btn" data-price="{{ option.price }}"
                                   data-id="{{ option.id }}">
                                <input type="checkbox" class="checkbox optionCheckbox">
                                <i class="icon-checkbox option-checkbox--icon icon-checkbox--blue"></i>
                                <div class="option-checkbox">
                                <span class="option-checkbox--title">
                                  <span
                                      class="group--options_checkbox--name text-loader--content">{{ option.title }}</span>
                                <span
                                    class="group--options_card-container_price text-loader--content">{{ option.price }}</span>
                                </span>
                                </div>
                              </div>
.....
{%- endfor -%}

итоговый блок:

<section class="review-page--content review-page--summary">
                        <div class="review-page--body">
                          <div class="review-page--body">
                            <div class="review-page--blocks">
                              <div class="review-page--header">Итоговый заказ</div>
                              <div class="review-page--block">
                                <div class="review-page--line-items">
                                  <ul class="review-page--line-items-list review-page--summary total-review-list">

                                    <li class="review-page--line-item">
                                      <span class="label--option order-configuration-title"></span>
                                    </li>
                                    <li class="review-page--line-item">
                                      <span class="label--option order-color-title"></span>
                                    </li>

                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

Answer 1

[xakslim]

создал массив и потом перебрал его с последующим выводом во вложенный список

function optionPush() {
  var optionVal = [];
  var optionUrl = '';
  var optionList = [];
  var totalOptionList = '';

  $('.option-btn.is-selected').each(function () {
     optionVal.push($(this).data('id'));
     optionList.push(($(this).find('.group--options_checkbox--name')).text());
  });

  if (optionList.length) {
    $(optionList).each(function () {
      totalOptionList += '<li class="review-page--line-item" data-code="$SPT31"><span class="label--option">' + this + '</span></li>'
    })
    
  } else {
    totalOptionList = '';
  }

  if (totalOptionList) {
    $('.options-list-total').show().html(totalOptionList);
  } else {
    $('.options-list-total').hide();
  }


  if (optionVal.length) {
    optionUrl = optionVal.join(',');
  } else {
    $('#options-ids').val('');
  }

  if (optionUrl) {
    $('#options-ids').val(optionUrl);
  }
}

Answer 2

[Дмитрий Беляев]

замените

if (optionList) {
    $('.total-review-list').append(optionList);
  }

на$('.total-review-list').html(optionList);

Comments

[xakslim]

да добавляет, но удаляет все содержимое. добавил вложенный список. Но вот здесь она скливает все функции, а не формирует список

optionList += '<li class="review-page--line-item" data-code="$SPT31"><span class="label--option">' +
              ($('.option-btn.is-selected').find('.group--options_checkbox--name')).text() + '</span></li>'