使用jQuery插入新的div块

Question

如果我点击插入按钮，我想插入新的div块。但是，当我在互联网上搜索时，我找到了方法。我使用了一种方法。但它使用了常量div块。我想只使用id来调用新的div块，如果我点击删除选项，我想删除它。"<div class="main-block"></div>"那个地方，我想调用id来显示主要块。我怎么能这样做？

请帮帮我。

$('.add').click(function() {
    $('.block:last').before('<div class="main-block"><div class="main-block"></div><span class="remove">Remove Option</span></div>');
});
$('.main-block').on('click','.remove',function() {
  $(this).parent().remove();
});

.block {
  display: block;
}

span {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-block">
  <div class="col-md-2  main-title">
    <b>Language</b>
    <label class="title">Japan </label><br>
    <label class="title">Chinese </label><br>
    <label class="title">English </label><br>
    <label class="title">Korea </label>
  </div>
  <div class="col-md-4  main-title">
    <b style="margin-left:40px;">Name</b>
    <select class="selectbox" name="select1" id="select1">
      <option value="1">Business Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select2" id="select2">
      <option value="1">Chinese</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select3" id="select3">
      <option value="1">English Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select4" id="select4">
      <option value="1">Korea Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
  </div>
  <div class="col-md-6 main-title">
   <b style="margin-left:40px;">Alias Name</b>
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
  </div>

  <div class="block">
    <span class="add">Add Option</span>
  </div>
</div>

Answer 1

尝试以下代码

$(function(){
  $('.add').click(function() {
     $("#main-block").show();
  });
$('.remove').on('click',function() {
  $("#main-block").hide();
});
});

.block {
  display: block;
}

span {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
}

#main-block {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-block">
  <div class="col-md-2  main-title">
    <b>Language</b>
    <label class="title">Japan </label><br>
    <label class="title">Chinese </label><br>
    <label class="title">English </label><br>
    <label class="title">Korea </label>
  </div>
  <div class="col-md-4  main-title">
    <b style="margin-left:40px;">Name</b>
    <select class="selectbox" name="select1" id="select1">
      <option value="1">Business Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select2" id="select2">
      <option value="1">Chinese</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select3" id="select3">
      <option value="1">English Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
    <select class="selectbox" name="select4" id="select4">
      <option value="1">Korea Center</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
      <option value="5">Option 4</option>
    </select>
  </div>
  <div class="col-md-6 main-title">
   <b style="margin-left:40px;">Alias Name</b>
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
    <input type="text" class="form-control text-box" />
  </div>
  <div class="main-block" id="main-block"><div class="main-block"></div><span class="remove">Remove Option</span></div>
  <div class="block">
    <span class="add">Add Option</span>
  </div>
</div>