Jquery 删除动态创建的节点

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

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

$（“#添加产品”）。单击（函数（）{
let元素=$(
“\n”+
“\n”+
'产品\n'+
“\n”+
“选择产品”+
“{！！$options！！}\n”+
'                    ' +
“\n”+
“\n”+
'产品代码\n'+
“\n”+
“\n”+
“\n”+
'产品数量\n'+
“\n”+
“\n”+
“\n”+
'产品价格\n'+
“\n”+
“\n”+
“\n”+
'折扣\n'+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
'操作\n'+
“\n”+
'删除\n'+
“\n”+
“\n”+
“\n”+
“\n”+
'');
$（'.last'）。在（元素）之前；
});

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

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

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

            event.preventDefault();

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

        });

    });
</script>

$（文档）.ready（函数（）{
$（'new product'）。在（'click'，'delete product'，函数（事件）{
event.preventDefault（）；
$（this）.closest（'.new product'）.remove（）；
});
});

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

<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

<div class="row last new-product">
    <div class="col-lg-4">
        <label for="product">Product</label>
        @if($products)
            <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]">
                <option selected disabled>Select a product</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}" data-price="{{ $product->selling_price }}">{{ $product->name }}</option>
                @endforeach
            </select>
        @endif
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="product_code">Product Code</label>
            <input type="text" class="form-control" id="product_code" name="product_code[]" placeholder="Enter product code" value="{{ old('product_code') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="quantity">Product Quantity</label>
            <input type="number" class="form-control" id="quantity" name="quantity[]" placeholder="Enter product quantity" value="{{ old('quantity') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="price">Product Price</label>
            <input type="text" class="form-control" id="price" name="price[]" placeholder="Enter product price" value="{{ old('price') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="discount">Product Discount</label>
            <div class="input-group">
                <div class="input-group-prepend"><span class="input-group-text"><i class="fal fa-percentage"></i></span></div>
                <input type="text" id="discount" name="discount[]" class="form-control" placeholder="Enter product discount">
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="actions">Actions</label>
            <div class="input-group">
                <span id="add-product"><i class="fal fa-plus"></i> Add product</span>
                <span id="delete-product">Delete</span>
            </div>
        </div>
    </div>
</div>

产品
@如果（$产品）
选择产品
@foreach（$products as$product）
{{$product->name}
@endforeach
@恩迪夫
产品代码
产品数量
产品价格
产品折扣
行动
添加产品
删除

将

$（“.新产品”）更改为
$（文档）
，如下所示：

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

注意：-
新产品
也是动态创建的，因此您不能将其用作参考。使用添加整个
新产品的元素的
$（文档）
或
id
或
类
，将
$（'.new product'）
更改为
$（文档）
，如下所示：

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

注意：-
新产品
也是动态创建的，因此您不能将其用作参考。可以使用添加整个
新产品的元素的
$（文档）
或
id
或
class