Как добавить дополнительные поля с помощью jQuery?

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(); 
    }); 
}); 

Update:

Я обновил свой HTML и код JQuery. Теперь у меня есть кнопка + Добавить еще. Когда я нажимаю кнопку, она добавляет 3 новых поля ввода, которые я хочу. Но я хочу добавить кнопку удаления для каждого вновь созданного 3 поля, чтобы удалить его.

Как я могу это сделать?

Answer 1

Вы можете использовать приведенную ниже логику. это будет клонировать первый div.after-add-more и добавить кнопку удаления на html.

P.S: Я удалил идентификатор, чтобы избежать дублирования идентификаторов в атрибуте html.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(); 
    }); 
});