【发布时间】：2023-02-01 23:14:02
【问题描述】：
你好，我做了一个动态添加和删除输入字段，代码工作得很好，除了当你达到删除字段的最大限制时的部分，这是我的代码：
function rmv()
{
var count = document.getElementsByTagName('input');
if(count.length > 6){
$(document).on('click', '#rmvbtn', function () {
$(this).closest('#dynamic').remove();
});
}else{
alert('Order must have minimum one product-1');
}
}
当警报出现并且我单击确定时，最后一个字段被删除，我尝试调试代码以查看它是否在我按下确定后进入删除功能，但它没有。
6 的原因是因为默认有 6 个字段，用户可以添加更多和删除新添加的字段，但不能删除 6 个默认字段。所以这个错误是从默认部分删除字段。
这是 html 部分，它是一个编辑面板，用户可以在其中编辑为客户制作的订单，这部分是用 Laravel 制作的。这些行的打印次数与存在的订单产品一样多，因此每个重复的行旁边都有一个按钮来删除该特定行，这是代码：
@foreach($orders->products as $product)
<div id="olddynamic">
<div class="row mb-3">
<label for="products" class="col-md-4 col-form-label text-md-end">{{ __('Product') }}</label>
<div class="col-md-6">
<select name="products[]" id="products" type="text" class="form-control @error('products') is-invalid @enderror" required autocomplete="products">
<option value="" selected="true" disabled>{{$product->name}}</option>
@foreach($productList as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
@endforeach
</select>
@error('products')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="amount" class="col-md-4 col-form-label text-md-end">{{ __('Amount') }}</label>
<div class="col-md-6">
<input id="amount" type="text" class="form-control @error('amount') is-invalid @enderror"
name="amount[]" value="{{ $product->pivot->amount }}" required autocomplete="amount">
@error('amount')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col"><button type="button" id="oldrmvbtn" onclick="oldrmv()" class="btn btn-primary"><span class="bi bi-dash-lg"></span></button></div>
</div>
@endforeach
还有一个添加行按钮，可以将新行添加到现有订单中，这是代码：
<div class="col"><button type="button" id="addbtn" onclick="add()" class="btn btn-primary"><span class="bi bi-plus"></span></button></div>
这是整个 Javascript 代码：
<script>
function add()
{
$('#amm').append(
'<div id="dynamic"><div class="row mb-4"><label for="products" class="col-md-4 col-form-label text-md-end">{{ __("Product") }}</label><div class="col-md-6"><select name="products[]" id="products" type="text" class="form-control @error("products") is-invalid @enderror" required autocomplete="products">@foreach($productList as $item)<option value="{{$item->id}}">{{$item->name}}</option>@endforeach</select>@error("products")<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>@enderror</div></div> <div class="row mb-3"><label for="amount" class="col-md-4 col-form-label text-md-end">{{ __("Amount") }}</label><div class="col-md-6"><input id="amount" type="text" class="form-control @error("amount") is-invalid @enderror" name="amount[]" required autocomplete="amount">@error("amount")<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>@enderror</div></div> <div class="col"><button type="button" id="rmvbtn" onclick="rmv()" class="btn btn-primary"><span class="bi bi-dash-lg"></span></button></div> </div>'
);
}
function rmv()
{
var count = document.getElementsByTagName('input');
if(count.length > 6){
$(document).on('click', '#rmvbtn', function () {
$(this).closest('#dynamic').remove();
});
}else{
alert('Order must have minimum one product-1');
}
}
function oldrmv()
{
var count = document.getElementsByTagName('input');
if(count.length > 6){
$(document).on('click', '#oldrmvbtn', function () {
$(this).closest('#olddynamic').remove();
});
alert(count.length);
}else{
alert('Order must have minimum one product-2');
}
}
</script>
【问题讨论】：
-
请同时添加 HTML。
-
我猜这个问题是由于
rmv()函数中嵌套的click处理程序造成的，但是没有看到 HTML/JS 的整个上下文，那么没有足够的信息来准确调试它 -
html 和 Js 有点复杂，但我会编辑我的帖子
-
@RoryMcCrossan 我发布了整个代码，希望你能理解
-
@adiga 我添加了整个代码但是在 Laravel 中
标签： javascript jquery laravel