JQuery - Как поддерживать (индексировать) последовательность с возможностью удаления динамических c элементов в любом порядке

Question

Мой HTML имеет следующие div (-ы) с одним входом с кнопкой Добавить:

<form method="post" action="">
        <div class="row">
            <div class="col-lg-6">
                <div id="inputFormRow">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">1</span>
                        </div>
                        <input type="text" name="title[]" class="form-control m-input"
                            placeholder="Enter title" autocomplete="off">
                    </div>
                </div>

                <div id="newRowGoesHere"></div>
                <button id="appendNewRow" type="button"
                    class="btn btn-sm btn-success">
                    <i class="fas fa-plus"></i> Add
                </button>
            </div>
        </div>
    </form>

Я заполняю динамические c входы, используя JQuery, как показано ниже:

$(document)
        .ready(
                function() {
                    var x = 1;
                    console.log("ready!");

                    $("#appendNewRow")
                            .click(
                                    function() {
                                        x++;
                                        var html = '';
                                        html += '<div id="appendedRow">';
                                        html += '<div class="input-group input-group-sm mb-3">';
                                        html += '<div class="input-group-prepend">';
                                        html += '<span class="input-group-text">'
                                                + x + '</span></div>';

                                        html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
                                        html += '<div class="input-group-append">';
                                        html += '<button id="removeRow" type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>';
                                        html += '</div></div>';

                                        $('#newRowGoesHere').append(html);
                                    });

                    $(document).on('click', '#removeRow', function() {
                        $(this).closest('#appendedRow').remove();
                        x--;
                    });
                });

Я получаю порядковый номер с добавлением приращения на каждом входе, но когда я удаляю элемент ввода, я теряю последовательность.

Например, если я добавлю 5 входов и удалю второй, тогда, если я добавлю больше, счетчик будет начинаться с 5, как это (снимок экрана):

Ожидаемая последовательность: 1,2,3,4,5, а не 1,3,4,5,5

Теперь я не знаю, как поддерживать правильную числовую последовательность (добавлено в начале ) независимо от того, какой элемент я удаляю.

Я должен записать порядковый номер в моем проекте. Откуда мне go отсюда? Будем очень признательны за любые указатели.

Answer 1

Вы можете использовать от each до l oop через все div после удаления любого элемента, а затем сбросить <span> для отображения правильного count. Кроме того, вы не можете иметь несколько идентификаторов с одинаковым именем, поэтому для это я добавил class="something" к каждому div перед добавлением, чтобы мы могли использовать его в each l oop.

Демо-код :

$(document)
  .ready(
    function() {
      var x = 0;
      console.log("ready!");

      $("#appendNewRow")
        .click(
          function() {
            x++;
            var html = '';
            html += '<div class="abc" id="appendedRow' + x + '">';
            html += '<div class="input-group input-group-sm mb-3">';
            html += '<div class="input-group-prepend">';
            html += '<span class="input-group-text">' +
              x + '</span></div>';

            html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
            html += '<div class="input-group-append">';
            html += '<button id="removeRow" type="button" class="btn btn-danger removeRow"><i class="far fa-trash-alt">Del</i></button>';
            html += '</div></div>';

            $('#newRowGoesHere').append(html);
          });
      //remove
      $(document).on('click', '.removeRow', function() {
        $(this).closest('.abc').remove(); //find closest class
        x--;
        resetValues(); //call function
      });

      function resetValues() {
        counter = 1; //initialze to 1
        //looping through class div -> class abc
        $(".abc").each(function() {
          //getting span where count is display replace with new
          $(this).find('.input-group-text').text(counter);
          //replce id with new id
          $(this).attr('id', "appendedRow" + counter);
          counter++;
        })
      }
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<form method="post" action="">
  <div class="row">
    <div class="col-lg-6">
      <div id="inputFormRow">
        <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">0</span>
          </div>
          <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
        </div>
      </div>

      <div id="newRowGoesHere"></div>
      <button id="appendNewRow" type="button" class="btn btn-sm btn-success">
                    <i class="fas fa-plus"></i> Add
                </button>
    </div>
  </div>
</form>