javascript - 带复选框的简单动态列表

Question

寻找一种使用复选框“另一个项目”创建动态列表的方法，并且能够根据要求删除，如下图所示:

它应该支持添加和删除项目。

<小时/>

编辑:

我的代码是这样的:

<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>