我有 3 个带有 + 添加更多 按钮的输入字段。我想在按下 + 添加更多 按钮时添加更多字段。
创建新字段时,应该有一个删除按钮来删除新添加的行,可以使用+添加更多 按钮创建新行。
为此,我正在使用以下 html 和 jQuery 代码,但不知道如何添加/删除字段!
html 和 jQuery 代码
<div id="tab_logic" class="after-add-more">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Logger Name</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Logger Name" name="lg_name[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Logger Serial Number</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Serial Number" name="lg_sl[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Modem Serial Number</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Modem Serial Number" name="lg_md_sl[]" />
</div>
</div>
<div class="remove-button"></div>
</div>
<div class="col-md-2">
<div class="form-group change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
<div class="more-feilds"></div>
$(document).ready(function() {
$(".add-more").click(function(){
var html = $("#tab_logic").html();
$(".more-feilds").append(html);
});
$("body").on("click",".remove",function(){
$(this).parents("#tab_logic").remove();
});
});
更新:
我已经更新了我的 html 和 jquery 代码。现在我有了 +Add More 按钮。当我按下按钮时,它添加了 3 个我想要的新输入字段。但我想为每个新创建的 3 个字段添加删除按钮以将其删除。
我该怎么做?
最佳答案
您可以使用以下逻辑。这将克隆第一个 div.after-add-more 并在 html 上添加删除按钮。
P.S:我已经删除了 id 以避免 html 中的重复 id。此功能不需要 ID 属性,希望这不是您的问题。
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
// $(html).find(".change").prepend("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="after-add-more">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Logger Name</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Logger Name" name="lg_name[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Logger Serial Number</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Serial Number" name="lg_sl[]" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Modem Serial Number</label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter Modem Serial Number" name="lg_md_sl[]" />
</div>
</div>
<div class="col-md-2">
<div class="form-group change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
关于javascript - 如何使用 jQuery 添加更多字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41573401/