类型(1)的第一个和第n个不适用于dynamicique div

Question

我遇到了第一个类型和第n个类型(1(的问题，无法隐藏类的第一个元素。

在我的脚本中，用户可以添加输入文本，他可以选择延迟这些输入。第一项(即第一个元素(不会被隐藏，因此没有delate链接。

当添加第一个类型或第n个类型(1(时，删除的所有链接都被隐藏。对于脚本，添加的每个div项都是第一个，这就是为什么删除始终隐藏的原因。

这是我的脚本：

$(function() {
var max_fields = 10;
var $wrapper   = $(".containerDim");
var add_button = $(".add_form_field");

$(add_button).click(function(e) {

e.preventDefault();
const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()
const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);

if ($("> .item",$wrapper).length < max_fields && val < 300) {
const $form_colis = $(".item").first().clone();
$form_colis.find("input").val("");
// $wrapper.append($form_colis); //add input box
$('.item', $wrapper).last().after($form_colis);

} else {
var err_msg = 'Veuillez nous contacter!';
//alert(err_msg);
window.alert(err_msg);
}
});
$wrapper.on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});

.delete:nth-of-type(1) {
display:none;
}
.delete:first-of-type {
display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dimensions" class="row item">

<div class="col-sm-3">
<label>Longueur(cm):</label>
<input type="number"  min="0" name="longueurs[]" id="length"  value="<?php //echo $length;?>" required>
</div>
<div class="col-sm-3">
<label>Largeur(cm):</label>
<input type="number"  min="0" name="largeurs[]" id="width" value="<?php //echo $width;?>" required>
</div>
<div class="col-sm-3">
<label>Hauteur(cm):</label>
<input type="number"  min="0" name="hauteurs[]" id="height" value="<?php //echo $height;?>" required>
</div>
<div class="col-sm-2">
<label>Poids(Kg):</label>
<input type="text"  min="0" name="poids[]" id="weight" value="<?php //echo $weight;?>"required>
</div>  

<!--div class="col-sm-1 "-->
<br>
<a href="#" class="delete">Delete</a>
<!--/div-->

</div> <!-- row dimensions item -->

有任何解决方案可以解决这个问题。

提前感谢

Answer 1

包装器.containerDim中有.items，只有它们才能用作相关的索引引用：

.containerDim .item:nth-child(1) .delete {}

或

.containerDim .item:first-of-type .delete {}

jQuery(function($) {
const max_fields = 10;
const $wrapper = $(".containerDim");
const add_button = $(".add_form_field");

$(add_button).click(function(e) {
e.preventDefault();
const vals = $(".item input[name^=poids]", $wrapper).map(function() {
return +this.value
}).get()

const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);
if ($(".item", $wrapper).length < max_fields && val < 300) {
const $itemClone = $(".item", $wrapper).eq(0).clone();
$("input", $itemClone).val("");
$wrapper.append($itemClone); // use .append()
} else {
window.alert('Veuillez nous contacter!');
}
});
$wrapper.on("click", ".delete", function(e) {
e.preventDefault();
$(this).closest('.item').remove(); // use .closest() and go for a specific class!
});
});

.containerDim .item {
padding: 20px;
border: 1px solid #ddd;
}
.containerDim .item:nth-child(1) .delete{
display: none;
}

<div class="containerDim">
<!-- Remove the ID id="dimensions"  you cannot have duplicated iDs -->
<div class="row item">
<div class="col-sm-3">
<label>Longueur(cm):</label>
<input type="number" min="0" name="longueurs[]" id="length" value="10" required>
</div>
<div class="col-sm-3">
<label>Largeur(cm):</label>
<input type="number" min="0" name="largeurs[]" id="width" value="10" required>
</div>
<div class="col-sm-3">
<label>Hauteur(cm):</label>
<input type="number" min="0" name="hauteurs[]" id="height" value="10" required>
</div>
<div class="col-sm-2">
<label>Poids(Kg):</label>
<input type="text" min="0" name="poids[]" id="weight" value="1" required>
</div>
<a href="#" class="delete">Delete</a>
</div>
</div>
<button class="add_form_field">ADD MORE</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>