Добавить удалить с нумерацией, указанной динамически

Question

Так что в настоящее время я могу легко добавлять и удалять несколько textarea

Но я пытаюсь сделать так, чтобы нумерация соответствовала спецификациям c textarea

Вот моя текстовая область

, как вы заметили, моя текстовая область по умолчанию Step 1

Но я хотел сделать, когда я нажму добавить, он покажет другую текстовую область, которая говорит

Step 2

  <div class="optionBox">
                <div class="block">
                    <div class="form-group">
                      <label for="exampleFormControlTextarea1">Step 1</label>
                      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
                    </div>

                     <span class="remove">Remove</span>

                </div>
                <div class="block"> <span class="add">Add Option</span>

                </div>
            </div>

Мой Javascript

 $('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});

Вот токовый выход

Answer 1

Чтобы сделать это, вы можете добавить элемент span без содержимого к label в каждом .block. Затем вы можете создать функцию, которая обновляет число в этом span на основе индекса элемента каждый раз, когда вы добавляете или удаляете .block.

Я бы также настоятельно рекомендовал вам клонировать элементы вместо добавления большого количества HTML в ваш JS logi c, поскольку это нарушает принцип разделения интересов из-за слишком большой привязки JS тесно с HTML. В вашем случае это можно сделать, просто добавив один дополнительный класс к .block, который содержит элементы textarea. Попробуйте это:

$('.add').click(function() {
  let $lastBlock = $('.block.step:last');
  let $clone = $lastBlock.clone().insertAfter($lastBlock);
  $clone.find('textarea').val('');
  updateStepCounts();
});

$('.optionBox').on('click', '.remove', function() {
  if ($('.block.step').length > 1) {
    $(this).closest('.block').remove();
    updateStepCounts();
  }
});

let updateStepCounts = () => $('.block label span').text(i => i + 1);
updateStepCounts();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="block step">
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Step <span></span></label>
      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
    </div>
    <span class="remove">Remove</span>
  </div>
  <div class="block">
    <span class="add">Add Option</span>
  </div>
</div>

Answer 2

Я удалил div.block, окружающий «опцию добавления» span и использовал .append на вновь добавленном элементе div.block-container вместо .before, чтобы добавить следующий textarea в конец контейнера опций , я думаю, что это выглядит немного лучше по смыслу.

Также используя строковую интерполяцию, я могу вставить общее число div.block + 1, чтобы отслеживать количество текстовых областей, видимых на странице.

Надеюсь, это поможет.

$('.add').click(function () {
  const numberOfBlocks = $(".block").length;
  
  $(".block-container")
    .append(`
      <div class="block">
        <div class="form-group">
          <label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>
          <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>      
        </div>
        <span class="remove">Remove</span>
      </div>`
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
    <div class="block-container">
        
    </div>
    <span class="add">Add Option</span>
</div>