Question

我有一个创建新节点并将其添加到DOM的按钮，但是当我尝试为该新创建的节点创建一个删除按钮时，我不知道如何创建它。这是我创建节点的jQuery代码：

db.table.AsEnumerable().Select(i => new Data() {
    stringDate = String.Format("{0:dd/MM/yyyy}", i.databaseData),
}

在这里，我尝试删除新创建的DOM元素，但是它不起作用。

<script>
    $('#add-product').click(function () {

        let element = $(
            '            <div class="row new-product">\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label for="product">Product</label></div>\n' +
            '                    <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]">\n' +
            '                       <option selected disabled>Select a product</option>' +
            '                           {!!$options!!}\n' +
            '                    </select>' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Code</label></div>\n' +
            '                    <input type="text" class="form-control" id="product_code" name="product_code[]" placeholder="Enter product code" value="{{ old('product_code') }}"/>\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Quantity</label></div>\n' +
            '                    <input type="number" class="form-control" id="quantity" name="quantity[]" placeholder="Enter product quantity" value="{{ old('quantity') }}" />\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Price</label></div>\n' +
            '                    <input type="text" class="form-control" id="price" name="price[]" placeholder="Enter product price" value="{{ old('price') }}" />\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Discount</label></div>\n' +
            '<div class="input-group">\n'+
            '<div class="input-group-prepend"><span class="input-group-text"><i class="fal fa-percentage"></i></span></div>\n' +
            '<input type="text" id="discount" name="discount[]" class="form-control" placeholder="Enter product discount">\n' +
            '</div>\n' +
            '                       </div>\n' +
            '<div class="col-lg-4">\n' +
            '<div class="form-group">\n' +
            '<label for="actions">Actions</label>\n' +
            '<div class="input-group">\n' +
            '<span class="delete-product">Delete</span>\n' +
            '</div>\n' +
            '</div>\n' +
            '</div>\n' +
            '                </div>\n' +
            '</div>');
            $('.last').before(element);

    });
</script>

使用“添加按钮”创建的节点，当我单击删除时，它不会删除该节点：

呈现的HTML

<script>
    $(document).ready(function () {

        $('.new-product').on('click', '.delete-product', function (event) {

            event.preventDefault();

            $(this).closest('.new-product').remove();

        });

    });
</script>

Answer 1

将$('.new-product')更改为$(document)，如下所示：

$(document).ready(function () {
    $(document).on('click', '.delete-product', function (event) {
        event.preventDefault();
        $(this).closest('.new-product').remove();
    });
});

注意：-new-product也是动态创建的，因此您不能将其用作参考。使用您在其中附加了整个$(document)

的那个元素的id 或class或new-product >

删除动态创建的节点

1 个答案: