Question

我需要在添加按钮的单击时将第一个div附加到第二个div，并在追加时添加减号按钮。单击减号按钮将删除附加的div。

在第二次追加时，它会显示为另一个div框。

像一个盒子，然后是另一个盒子。

只有在用户提供输入后才应附加。

<div id="question_det">
  <input type="text" value="" id="question" name="question[]">
  <table>
    <tr>
      <td><input type="radio" name="question_type" value="1">star</td>
      <td><input type="radio" name="question_type" value="2">nps</td>
      <td><input type="radio" name="question_type" value="3">comment</td>
      <td><input type="radio" name="question_type" value="4">option</td>
      <td><input type="radio" name="question_type" value="5">check</td>
    </tr>
  </table>
  <input type="button" name="add" id="add" value="Add">
</div>
<div id="append"></div>

Answer 1

我已将id更改为class属性，因为如果您要复制元素，则无法设置id属性，因为id属性必须是唯一的

$('.add').click(function() {
  var cloned = $('.question_det').clone();
  cloned.appendTo($('#append'));
  var remove = $('<button>remove</button>').insertAfter(cloned.find('.add'));
  remove.click(function() {
    $(this).parents('.question_det').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_det">
  <input type="text" value="" id="question" name="question[]">
  <table>
    <tr>
      <td><input type="radio" name="question_type" value="1">star</td>
      <td><input type="radio" name="question_type" value="2">nps</td>
      <td><input type="radio" name="question_type" value="3">comment</td>
      <td><input type="radio" name="question_type" value="4">option</td>
      <td><input type="radio" name="question_type" value="5">check</td>
    </tr>
  </table>
  <input type="button" name="add" class="add" value="Add">
</div>
<div id="append"></div>

<强>更新

如果要根据单选按钮的值添加条件语句添加div的代码，可以执行以下操作：

$('.add').click(function() {
  // check wich div you should copy from the radio buttons
  var selected = $('.div_type:checked').val();
  // defined the cloned selector based on the choosen radio button's value
  var selector = selected == 1 ? '.question_det' : '.opt2';
  var cloned = $(selector).first().clone();
  cloned.appendTo($('#append'));
  var remove = $('<button>remove</button>').appendTo(cloned);
  remove.click(function() {
    $(this).parents('.container').remove();
  });
});

.question_det {
  background:#eee;
  border:1px solid #3d3d3d;
  margin-bottom:10px;
}

.opt2 {
  background:red;
  color:#fff;
  margin-bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label><input class="div_type" type="radio" name="type" value="1" checked="checked" />Type 1</label>
<label><input class="div_type" type="radio" name="type" value="2" />Type 2</label>
<hr />
<div class="question_det container">
  <input type="text" value="" id="question" name="question[]">
  <table>
    <tr>
      <td><input type="radio" name="question_type" value="1">star</td>
      <td><input type="radio" name="question_type" value="2">nps</td>
      <td><input type="radio" name="question_type" value="3">comment</td>
      <td><input type="radio" name="question_type" value="4">option</td>
      <td><input type="radio" name="question_type" value="5">check</td>
    </tr>
  </table>
  <input type="button" name="add" class="add" value="Add">
</div>
<div class="opt2 container">
  Opt 2 Opt 2 Opt 2 Opt 2 Opt 2 
</div>
<div id="append"></div>

div根据输入附加

1 个答案: