Простой динамический список с флажок

Question

Ищете способ, чтобы сделать динамический список, используя опцию «другой элемент» с возможностью удаления, если требуется, как на этом изображении:

Она должна поддерживать как добавление и удаление предметов.

---

Edit:

Мой код, как:

<div id="contactdetails"> 
    <div class="row"> 
     <div class="col-lg-6 col-md-12"> 
     <div class="input-group"> 
     <span class="input-group-addon"><i class="fa fa-list"></i></span> 
      <input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name"> 
     </div> 
     <p class="note">Example: Mike</p> 
     </div><!--row and col--> 

     <div class="col-lg-6 col-md-12"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span> 
       <input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name"> 
       </div> 
      <p class="note">Example: Johnson</p> 
      </div> 
     </div> 
    </div> <!--row and col--> 

<div class="row"> 
     <div class="col-lg-12 col-md-12"> 
     <div class="checkbox" style="padding-left:10px; margin-top: 0px;"> 
      <span> 
      <label> 
       <input name="addmore" id="addmore" type="checkbox" class="checkbox style-2"> 
       <span> More contacts</span> 
      </label> 
      </span> 
     </div> 
     </div> 
    </div> <!--row and col--> 

</div><!--contact details--> 

Answer 1

Вы можете добавлять элементы в контейнер и удалить каждый элемент, если флажок установлен.

$("body").on("click","input[type='checkbox']",function() 
 
{ 
 
    if(!$(this).is(":checked")) 
 
    { 
 
    $(this).parent().remove(); 
 
    } 
 
    else 
 
    { 
 
    $("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div> 
 
</div>

Answer 2

Попробуйте это. Как я уже упоминал ранее, для достижения этой цели вы можете использовать $.clone().

<div> 
<table> 
<tr> 
    <td> 
    Item1 
    </td> 
    <td> 
    Item2 
    </td> 
</tr> 
<tr> 
    <td> 
    <input type="checkbox"> 
    </td> 
</tr>  
</table>  
</div> 
<script> 
    $(document).on("click",":checkbox",function() 
    { 
    if($(this).is(":checked")) 
     { 
     var clonedItem = $(this).closest('table').clone(); 
     $(clonedItem).find(":checkbox").removeAttr("checked"); 
     $(clonedItem).appendTo("div"); 
     } 
     else 
     { 
     if($(document).find(":checkbox").length > 0) 
     $(this).closest('table').remove(); 
     } 
    }); 
</script> 

Пример: https://jsfiddle.net/DinoMyte/sgcrupm8/1/