Question

我有一个带有 +添加更多按钮的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="">&nbsp;</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代码。现在我有+添加更多按钮。当我按下按钮时，它添加了我想要的3个新输入字段。但我想为每个新创建的3个字段添加删除按钮以将其删除。

我该怎么做？

Answer 1

您可以使用以下逻辑。这将克隆第一个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=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
      
          $(html).find(".change").html("<label for=''>&nbsp;</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="">&nbsp;</label><br/>
            <a class="btn btn-success add-more">+ Add More</a>
        </div>
    </div>
</div>

Answer 2

使用.append()代替.html()。 .append函数将内容插入匹配元素集中每个元素的末尾，.html将替换现有元素。

$(document).ready(function() {
    $(".add-more").click(function(){ 
        var html = $("#tab_logic").html();
        $(".after-add-more").after(html);
        $(".change").append("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents("#tab_logic").remove();
    });
});

如何使用jQuery添加更多字段？

2 个答案: