删除动态创建的节点 [英] Remove dynamically created nodes
本文介绍了删除动态创建的节点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个按钮可以创建一个新节点并将其添加到DOM.但是当我尝试为该新创建的节点创建一个删除按钮时，我不知道如何创建它. 这是我创建节点的jQuery代码:
I have a button that creates a new node and add it to the DOM.But when I try to make a remove button for that newly created node, I dont have idea how to make it. Here is my jQuery code to create the node:
<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>
在这里，我尝试删除新创建的DOM元素，但是它不起作用.
Here is where I try to remove the newly created DOM element, but it does not work.
<script>
$(document).ready(function () {
$('.new-product').on('click', '.delete-product', function (event) {
event.preventDefault();
$(this).closest('.new-product').remove();
});
});
</script>
使用添加按钮"创建的节点，当我单击删除"时，不会删除该节点:
Created node using "add button", when I click on delete it does not delete the node:
呈现的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>
推荐答案
将$('.new-product')更改为$(document)，如下所示:
$(document).ready(function () {
$(document).on('click', '.delete-product', function (event) {
event.preventDefault();
$(this).closest('.new-product').remove();
});
});
注意:-new-product也是动态创建的，因此您不能将其用作参考.使用您在其中添加了整个new-product
Note:- new-product is also dynamically created so you cannot use it as a reference. Either use $(document) or id or class of that element in which you appended this whole new-product
这篇关于删除动态创建的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
