Jquery сбросить счетчик на 0 при удалении элемента div?

Question

Я хочу сбросить счетчик, когда пользователь удаляет элемент. Например, у меня есть эти изображения: Картинка 1

На картинке 1 у нас есть Заголовок, Заголовок 1 и Заголовок 2

Картинка 2

На рисунке 2 все элементы удалены.

Рисунок 3

На рисунке 3 у нас есть заголовок 3 и заголовок 4.

Я хочу, чтобы когда пользователь нажимал кнопку добавления после удаления всех элементов, он должен начинаться снова с заголовка 1 и заголовка 2, а не заголовка 3 и заголовка 4, как на рисунке 3.

Мой код:

<div class="append">
                                    <button type="button" id="addRow" class=" btn btn-success float-right">Add Title
                                    </button>
                                    <div class="form-group">
                                        <label for="title">Title</label>
                                        <input type="text" name="title[]" class="form-control" id="row_0"
                                               placeholder="Enter Product Title">
                                        <a class="btn btn-danger remove" onclick="deleteTitleRow();">X</a>

                                    </div>
                                </div>
                                
                                $("#addRow").on('click', function () {
            count++;
            addTitleRow(count);
        });

        function addTitleRow(x) {
            let addTitle = '<div class="form-group">\n' +
                '<label for="title">Title ' + x + '</label>\n' +
                '<input type="text" name="title[]" class="form-control" id="row_' + x + '"\n' +
                '       placeholder="Enter Product Title">\n' +
                '<a class="btn btn-danger remove" onclick="deleteTitleRow();">X</a>\n' +
                '@if($errors->has('title'))\n' +
                '    <p class="error alert alert-danger">{{$errors->first('title')}}</p>\n' +
                '@endif\n' +
                '</div>';
            $(".append").append(addTitle);
        }

        function deleteTitleRow() {

            $("body").on("click", "a.remove", function () {
                $(this).parents(".form-group").remove();
            });


        }

Answer 1

Вы должны рассчитать количество заголовков при добавлении и удалении вызываемых событий. Проверьте код ниже:

$("body").on("click", "button.remove-row", function() {
  $(this).parent().remove();
  calculateTitles(); // Call  when removed row for title count calculation.
});

$("body").on("click", "button.add-row", function() {
  let addTitle = '<div class="form-group titles">' +
    '<label for="title" class="row-title"></label>' +
    '<input type="text" name="title[]" class="form-control" placeholder="Enter Product Title">' +
    '<button class="btn btn-danger remove-row">X</button>' +
    '</div>';
  $(".append").append(addTitle);
  calculateTitles(); // Call  when added row for title count calculation.
});

function calculateTitles() {
  // Find all titles, add label text as 'Title {index}', add one to index because it's starting from zero.
  $('.titles').each(function(index, title) {
    $(title).find('label.row-title').text('Title ' + (index + 1));
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append">
  <button type="button" class=" btn btn-success float-right add-row">Add Title</button>
  <div class="form-group titles">
    <label for="title">Title 1</label>
    <input type="text" name="title[]" class="form-control" placeholder="Enter Product Title">
    <button class="btn btn-danger remove-row">X</button>
  </div>
</div>