我正在编写一个脚本,在单击添加按钮后添加div块 一切都很好,但是在添加第二个增量块之后。
例如:第二次点击后,总共添加4个区块。
点击删除最后一个删除后。
var removeBtn = $("#removeField");
$("body").on("click", "#addField", function(e) {
e.preventDefault();
var room = $(".room-type").first();
var count = removeBtn.data("count");
if (count > 0) {
removeBtn.data("count", count++).attr("data-count", count++);
} else {
removeBtn.data("count", 1).attr("data-count", 1);
}
room.clone(false).appendTo(".room-type");
});
$("body").on("click", "#removeField:not([data-count=0])", function(e) {
e.preventDefault();
var count = removeBtn.data("count");
if (count > 0) {
$(".room-type").data("count", count--).attr("data-count", count--).last().remove();
}
});
<div class="form_element select room-type">
<div class="duo_left">
<label class="form_name"><?=pll__('Room type')?></label>
<select name="room-type[]" class="selectpicker multi-fields">
<?if($single != null) :?>
<option value="Single Room">Single Room</option>
<? endif; ?>
<?if($double != null) :?>
<option value="Single Room">Double Room</option>
<? endif; ?>
<?if($deluxe != null) :?>
<option value="Single Room">Deluxe Room</option>
<? endif; ?>
<?if($deluxe_double != null) :?>
<option value="Single Room">Deluxe Double Room</option>
<? endif; ?>
<?if($executive_room != null) :?>
<option value="Single Room">Deluxe Double Room</option>
<? endif; ?>
<?if($gloria_room != null) :?>
<option value="Single Room">Gloria Room</option>
<? endif; ?>
</select>
</div>
<div class="duo_right">
<label class="form_name"><?=pll__('Number')?></label>
<select name="room-number[]" class="selectpicker multi-fields">
<option value="0" selected>0</option>
<? for ($i=1; $i<=10; $i++) : ?>
<option value="<?=$i?>"><?=$i?></option>
<? endfor; ?>
<option value="10+">10+</option>
</select>
</div>
</div>
答案 0 :(得分:0)
你需要附加到父div,添加一个额外的div
喜欢&#34;容器&#34;在你的&#34;房间类型&#34; 并将你的克隆附加到它room.clone().appendTo("#container");
在删除之前检查你的房间类型的长度&#34;类
这是一个适合你的小提琴