当div元素被移除时，Jquery将计数重置为0？

Question

我想在用户删除项目时重置计数。例如，我有这些图片：图片1--------。

在图片1中，我们有标题，标题1和标题2。

图片2

在图片2中，所有的项目都被移除。

图3

在图3中，我们有标题3和标题4，我想要的是，当用户在删除所有项目后点击添加按钮时，应该从标题1和标题2开始，而不是像图3中的标题3和标题4。

我想要的是，当用户在删除所有项目后点击添加按钮时，应该从标题1和标题2重新开始，而不是像图3中的标题3和标题4。

我的代码

<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>