Javascript 单击按钮后删除div&x27；它不能正常工作。也不维持顺序

当我一个接一个地追加div时，它工作正常。但当我删除第一个或前一个中的任何一个时，它没有正确删除。若我想再加一个div，那个么div并没有保持序列。实际上，我想建立一个系统，用户可以添加产品，也可以在发票生成过程中删除产品。所以请帮助我如何维护这些东西。此外，我需要使用单个div计算单个产品的小计金额。以下是我的代码：

<script type="text/javascript">
               let divCount = 0;
               $(function() {
               $('#btnAddtoList').on('click', function(){
               divCount++;
               const div_title = divCount;
               var newDiv = $(
                `<div class=item-wrapper-${div_title}>` +
                  '<div class="container rounded bg-white mt-3 mb-3">' +
                    '<div class="row">' +
                      '<div class="col-md-12">' +
                        '<div class="row mt-3">' +
                          '<span><strong>পণ্যের বিবরণ #</strong></span>'+ div_title +
                        '</div>' +
                        '<div class="row mt-1 text-center">' +
                          '<select class="product_option form-control" id="product">' +
                            '<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য | 
                               অ্যাভেলেবল আছে) -- 
                             </option>' +
                            '</select>' +
                         '</div>' +
                         '<div class="row mt-3">' +
                           '<label class="labels" style="font-size: 16px">পণ্যের নাম</label>
                             <input type="text" class="form-control" id="productName">' +
                           '</div>' +
                         '<div class="row mt-3">' +
                           '<label class="labels" style="font-size: 16px">বিক্রয় মূল্য</label>
                             <input type="number" class="form-control" id="sellPrice">' +
                         '</div>' +
                         '<div class="row mt-3">' +
                          '<label class="labels" style="font-size: 16px">পণ্য মজুদ আছে </label> 
                           <input type="text" class="form-control" id="amount" ">' +
                         '</div>' +
                         '<div class="row mt-3">' +
                          '<label class="labels" style="font-size: 16px">পরিমাণ</label>
                           <input type="number" class="form-control quantity_pro" id="quantity" ">' +
                         '</div>' +
                         `<div class="mt-3 d-flex flex-column align-items-center text-center">
                           <button class="btn btn-danger deleteItem" id=del-${div_title} 
                            type="button">মুছুন
                           </button>
                          </div>` +
                        '</div>' +
                      '</div>' +
                    '</div>' +
                '</div>');
           $('.productDiv').append(newDiv);
           console.log(div_title);
           $(".item-wrapper-" + div_title).find(".product_option").select2({
             theme: "classic"
           });        
         firebase.auth().onAuthStateChanged(function(user) {
            console.log(user);
                 if (user) {
                    var user_id = user.uid;
  
                     firebase.database().ref('Products/').child(user_id).once('value')
                     .then(function(snapshot){
                        snapshot.forEach(function(childSnapshot) {
                              var product_name = childSnapshot.child("product_name").val();
                              var selling_price = childSnapshot.child("selling_price").val();
                              var amount = childSnapshot.child("product_quantity").val();
                              {#console.log(amount)#}
                              var total = product_name + " | " + selling_price + " | " + amount;
                              console.log(total);
                            $(".item-wrapper-" + div_title).find(".product_option").append('<option>' 
                            + total + '</option');
                              $(document).on("change", ".product_option", function () {
                                  const valArr = $(`.item-wrapper-${div_title} .product_option 
                       option:selected`).text().split(" | ");
                                  $(`div.item-wrapper-${div_title} #productName`).val(valArr[0]);
                                  $(`div.item-wrapper-${div_title} #sellPrice`).val(valArr[1]);
                                  $(`div.item-wrapper-${div_title} #amount`).val(valArr[2]);

                              });
                        });
                      })
                 }
                else{
                    window.location.href="{% url 'login' %}";
                }
            });
        });

        $("#subTotal").on('click', function (e) {
            var subTotalAmount = 0;
            for (var i = 1; i<=divCount; i++){
                var getProductName = $(`div.item-wrapper-${i} #productName`).val();
                var getSellingPrice = $(`div.item-wrapper-${i} #sellPrice`).val();
                var getAmount = $(`div.item-wrapper-${i} #amount`).val();
                var getQuantity = $(`div.item-wrapper-${i} #quantity`).val();
                subTotalAmount += getSellingPrice*getQuantity;
            }
            var SellingPriceFloat = parseFloat(getSellingPrice);

            var amountFloat = parseFloat(getAmount);
            console.log(amountFloat)

            var quantityFloat = parseFloat(getQuantity);
            console.log(quantityFloat);

            console.log(subTotalAmount)
            if (quantityFloat>amountFloat){
                alert("পর্যাপ্ত পরিমান পণ্য নেই ।");
            }
            else {
                // executes only once
                 var subDiv = $(
                 '<div class="item-wrapper">' +
                    '<div class="container rounded bg-white mt-3 mb-3">' +
                        '<div class="row">' +
                            '<div class="col-md-12">' +
                                '<div class="row mt-3">' +
                                  '<span class="col-md-12">সাব টোটালঃ</strong></span>'
                                   +subTotalAmount +
                                '</div>' +
                                    '<div class="row mt-3">' +
                                        '<label class="labels" style="font-size: 16px">ডিসকাউন্ট(%) 
              </label><input type="text" class="form-control" id="productName">' +
                                    '</div>' +
                                    '<div class="row mt-3">' +
                                        '<label class="labels" style="font-size: 16px">ভ্যাট(%) 
                            </label><input type="text" class="form-control" id="sellPrice">' +
                                    '</div>' +
                                    '<div class="row mt-3">' +
                                        '<span class="col-md-12"><strong>মোটঃ</strong></span>'+
                                    '</div>' +
                         '<div class="mt-3 d-flex flex-column align-items-center text- center"> 
                         <button class="btn btn-info" type="button">মোট</button></div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>');
                $('.subTotalDiv').html(subDiv);
            }
           });
           $(document).on("click", ".deleteItem", function() {
              $(this).closest(`.item-wrapper-${divCount}`).remove();
              divCount-=1;
           });

         });
      </script>

设divCount=0；
$（函数（）{
$（'btnAddtoList'）。在（'click'，function（）上{
divCount++；
const div_title=divCount；
var newDiv=$(
`` +
'' +
'' +
'' +
'' +
“পণ্যের বিবরণ #'+div_标题+
'' +
'' +
'' +
' -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য | 
অ্যাভেলেবল আছে) -- 
' +
'' +
'' +
'' +
'পণ্যের নাম
' +
'' +
'' +
'বিক্রয় মূল্য
' +
'' +
'' +
'পণ্য মজুদ আছে  
' +
'' +
`
মুছুন
` +
'' +
'' +
'' +
'');
$（'.productDiv'）.append（newDiv）；
控制台日志（分区标题）；
$（“.item wrapper-”+div\u title）。查找（“.product\u option”）。选择2({
主题：“经典”
});        
firebase.auth（）.onAuthStateChanged（函数（用户）{
console.log（用户）；
如果（用户）{
var user_id=user.uid；
firebase.database（）.ref（'Products/'）.child（用户id）.once（'value'））
.then（功能（快照）{
snapshot.forEach（函数（childSnapshot）{
var product_name=childSnapshot.child（“product_name”）.val（）；
var selling_price=childSnapshot.child（“selling_price”）.val（）；
var amount=childSnapshot.child（“产品数量”）.val（）；
{#console.log（amount）}
var合计=产品名称+“|”+售价+“|”+金额；
控制台日志（总计）；
$（“.item wrapper-”+div\u title.find（“.product\u option”）.append（“”）
+total+'该代码中有许多重要问题

您正在创建一些始终具有相同id的动态元素
id
必须是唯一的。切勿在循环或附加元素的事件处理程序中使用id。
请改用
class
。




当您在一个字符串中连接了一行或两行以上的HTML以进行某些附加时，最好在隐藏在HTML中的“模板”上使用该方法。

这使您的代码更具可读性和可维护性，因为要克隆的“模板”将在代码编辑器中显示为常规HTML，因此您可以立即看到拼写错误。
而JS则更加简洁。




使用jQuery的主要优点是它可以轻松地使用简单而简短的方法“遍历”DOM。

从用户操作（例如从在
元素上触发的事件）…使用广泛的方法集，如、…等，以目标元素为目标。



未来编码提示：每次您必须向类中添加一个数字以使其唯一时……将其视为编码错误的症状。虽然
id
必须对一个元素唯一，但类必须是“通用”以对一组类似元素进行编码。



我完全删除了
divCount
变量
div_title
的“概念”。
您的问题不是如何正确使用它…而是如何不使用它。




函数嵌套。

您使用了事件委派：
$（document）.on（“更改”，“产品”选项），function（）{…}


不错！但这在Firebase回调中。
Firebase请求位于
btnAddtoList
单击处理程序中。



所以每次用户点击
পণ্য যোগ করুন （添加产品）
按钮，有一个对数据库的请求（很可能具有相同的结果）。并为所有
设置一个额外的委托处理程序。设置页面中的产品选项
选择。



看起来不太好，对吧？

这是因为您（失败）尝试使用一些“唯一的”
项目包装器-*
类。。。






下面是您的代码更改了很多。我没有深入研究您的Firebase请求，因为我真的不知道响应的结构。我“假设”了一个带有
快照
对象数组的响应。您可能有一些完全不同的东西

仔细查看代码和所有注释


console.clear（）；
$（函数（）{
//添加克隆的div
<div class="productDiv"></div>
<div class="mt-3 text-center">
  <button class="btn profile-button" style="color: white" type="button" 
  id="btnAddtoList">পণ্য যোগ করুন</button>
</div>
<div class="mt-3 text-center">
  <button class="btn profile-button" style="color: white" type="button" 
   id="subTotal" >সাব টোটাল</button>
  </div>
<div class="subTotalDiv"></div>