jQuery加载-删除先前加载的实例

Question

我使用jquery加载来加载html。

$("#sidebar-menu").on('click', '#inventory2BTN', function () {
    $("#loadContent").load("inventory1-mediaobject.html", loadInventory2Page);
  });

我创建了微调器以进行加减运算，如图所示。我将其设置为以数字1递增或递减。加载第一页后可以正常工作。下一次加载后，它增加2，依此类推。我的清单1-mediaobject.html代码：

<div class="row d-flex justify-content-center" id="inventory1"></div>
<script>

    async function setWarehousesDropDown() {
        var warehouses = await getWarehousesArray();
        var defaultWarehouse = "Riley";
        jQuery.each(warehouses, function (i, val) {

            $('#warohouse-select').append('<option value="' + val + '">' + val + '</option>');
        });
        $('#warohouse-select').val(defaultWarehouse)
    }

    function getProductsCards() {
        $('#inventory1').empty();
        $('#exampleModalCenter').remove();
        $("#inventory1").append('<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <h2 id="modal-qty" data-qty="0" class="bg-info text-right text-white p-1"></h2> <div class="input-group mb-3 number-spinner"> <div class="input-group-prepend"> <button data-dir="dwn" class="input-group-text bg-danger text-white font-weight-bold minus" width="50px;"><i class="fa fa-minus mr-2 ml-2" aria-hidden="true"></i></button> </div> <input type="number" id="product-qty-input" class="form-control form-control-lg text-center count font-weight-bold" value="0" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <button data-dir="up" class="input-group-text bg-success text-white font-weight-bold plus"><i class="fa fa-plus mr-2 ml-2" aria-hidden="true"></i> </button> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text bg-info text-white" for="warohouse-select">Warehouse:</label> </div> <select class="custom-select" id="warohouse-select"></select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div>');
        let db = firebase.firestore();
        var user = db.collection("users").doc(firebase.auth().currentUser.email);
        var products = user.collection("products").orderBy("productSKU", "asc");


        products.get().then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {

                if (doc.data().productQTY < doc.data().productMinQTY) {
                    warningClass = 'bg-danger';
                    warningText = 'text-danger">Quantity warning!!!';
                } else if (doc.data().productQTY > doc.data().productMinQTY && doc.data().productQTY < doc.data().productAlertQTY) {
                    warningClass = 'bg-warning';
                    warningText = 'text-warning">Quantity alert!';
                } else {
                    warningClass = 'bg-info';
                    warningText = 'text-info">';

                };

                if (doc.data().productImage) {
                    var image_src = doc.data().productImage
                } else {
                    var image_src = "assets/images/500x500.png"
                };
                if (doc.data().productParent) {
                    var parent = '<h6  data-parent="' + doc.data().productParent + '" class="bg-info text-right text-white p-2 goto-parent cursor-pointer">' + doc.data().productParent + '</h3>'
                } else {
                    var parent = ""
                };
                if (doc.data().productCategory) {
                    var category = '<h4 data-category="' + doc.data().productCategory + '" class="goto-category cursor-pointer"><i class="fa fa-folder-open-o"></i> ' + doc.data().productCategory + '</h4>'
                } else {
                    var category = "Uncategorized"
                };


                $("#inventory1").append('<div class="card m-1" style="width: 20rem;">' +
                    '<div class="card-header text-white" style="background-color:' + doc.data().productColor + ';"><h3 class="card-title">' + doc.data().productSKU + '</h3></div>' +
                    '<div class="card-body pl-1 pr-0 pt-1 pb-1">' +
                    '<div class="media">' +
                    '<img src="' + image_src + '" alt="John Doe" class="align-self-start" style="width:120px;">' +
                    '<div class="media-body">' +
                    '<h2 id="' + doc.data().productSKU + '" data-qty="' + doc.data().productQTY + '" data-sku="' + doc.data().productSKU + '" class="' + warningClass + ' text-right text-white p-1 goto-edit cursor-pointer">' + doc.data().productQTY + '</h2>' +
                    '<div>' + parent + '</div>' +
                    '<p class="text-right ' + warningText + '</p>' +
                    '</div>' +
                    '</div>' +




                    '</div>' +
                    '<div class="card-footer text-white pb-0" style="background-color:' + doc.data().productColor + ';">' +
                    '<div>' + category + '</div>' +
                    '</div>' +
                    '</div>');






            });
            //https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery
            $('#inventory1').on('click', 'button.gotoedit', function (e) {
                //$('#exampleModalCenter').modal('show');
                //swal("fff"+e.target.id);
                //$('#loadContent').empty();
                //$("#loadContent").load("edit-product.html", loadEditProductPage(e.target.id));
            });
            $('#inventory1').on('click', '.goto-category', function (e) {
                swal("fgo to category: " + e.target.dataset.category);

            });
            $('#inventory1').on('click', '.goto-edit', function (e) {

                $('#exampleModalCenter').modal('show');

                //$('#exampleModalCenter').find('.modal-title').text(e.target.id);
                $('#exampleModalCenter').find('.count').val("0");
                $('#exampleModalCenter').find('.modal-title').text(e.target.dataset.sku);
                $('#exampleModalCenter').find('#modal-qty').text(e.target.dataset.qty);
                $('#exampleModalCenter').find('#modal-qty').attr('data-qty', e.target.dataset.qty);
                //swal("fgo to category: "+e.target.id);
                // $('#loadContent').empty();
                //$("#loadContent").load("edit-product.html", loadEditProductPage(e.target.id));

            });
            $('#inventory1').on('click', '.goto-parent', function (e) {
                swal("fgo to parent: " + e.target.dataset.parent);

            });





        })
            .catch(function (error) {
                console.log("Error getting documents: ", error);
            });


    }

    $(document).ready(function () {


        $('.count').on('input', function () {
            var productQty = $('#exampleModalCenter').find('#modal-qty').attr("data-qty");
            var inputValue = $(this).val();
            var newProductQty = parseInt(inputValue) + parseInt(productQty);
            $('#exampleModalCenter').find('#modal-qty').text(newProductQty);
            //swal(productQty)
        });
        $(document).on('click', '.number-spinner button', function () {
            var productQty = $('#exampleModalCenter').find('#modal-qty').text();
            var btn = $(this);
            //swal(productQty)
            oldValue = btn.closest('.number-spinner').find('.count').val().trim();

            //var newVal = 0;

            if (btn.attr('data-dir') == 'up') {
                newVal = parseInt(oldValue) + 1;
                newProductQty = parseInt(productQty) + 1;
            } else {
                //if (oldValue > 1) {
                newVal = parseInt(oldValue) - 1;
                newProductQty = parseInt(productQty) - 1;
                // } else {
                // newVal = 1;
                // }
            }
            btn.closest('.number-spinner').find('.count').val(newVal);
            $('#exampleModalCenter').find('#modal-qty').text(newProductQty);
        });
        setWarehousesDropDown()
        getProductsCards();

        $("#but").click(function () {
            getProducts1();
        });

    })

</script>

如何清除先前的加载或将oldValue从代码设置为0 问候