在按钮单击时添加和删除输入文本

Question

我有一个允许用户创建自定义问题的表单。

用户需要插入问题的标题，然后选择问题的类型。

如果问题的类型是单选按钮、复选框或选择菜单，它应该出现一个 div “availableOptions”，默认显示两个输入文本，以便用户可以插入一些选项值。

怀疑：

当这个“availableOptions” div 出现时，还有一个“添加新选项”按钮，当点击它时应该会出现另一个输入文本，以便用户可以插入一个新的选项值。每个选项还应该始终有一个关联的删除按钮，当单击该按钮时，用户可以删除该输入文本，但它应该始终至少是一个输入文本。

您知道如何正确执行此操作吗？我有下面的工作示例，但它既不能用于附加也不能用于删除。

示例：https://jsfiddle.net/udx6pp8u/15/

HTML：

  <form id="" method="post" class="clearfix" action="">

  <div class="form-group">
    <label for="inputName">Title</label>
    <input type="text" class="form-control" id="inputName">
  </div>

  <div class="form-group">
    <label for="exampleFormControlSelect1">Type of Field</label>
    <select class="form-control" id="customQuestionType">
      <option>Text</option>
      <option>Long text</option>
      <option id="optionQuestion">Checkboxes</option>
      <option id="optionQuestion">Radiobuttons</option>
      <option id="optionQuestion">Select Menu </option>
    </select>
  </div>

  <div class="form-group" id="availableOptions">
    <label for="inputName">Available Options </label>
    <div class="option">
      <input type="text" class="form-control">
      <button id="removeOption">Remove Option</button>
    </div>
    <div class="option">
      <input type="text" class="form-control">
      <button id="removeOption">Remove Option</button>
    </div>

    <div class="form-group">
      <button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
    </div>
  </div>

  <input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>

</form>

CSS：

#availableOptions{display:none;}

jQuery：

var selected_option = $('#customQuestionType option:selected').attr('id');

if (selected_option == "optionQuestion") {
    $('#availableOptions').show();
    if ($('#addNewOption').click(function() {
            $('#availableOptions')
                .append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
        }));
    if ($('#removeOption').click(function() {
            $('#availableOptions') // how to remove the clicked otpion?
        }));

}

Answer 1

试试这个：

注意：不要使用 id。改用类。一份文档应该只有一个唯一的 id。使用多个 id="removeOption" 将使您的脚本行为不正确，并选择第一个找到的并忽略其余具有相同 id 的脚本

$('#customQuestionType').change(function(){
  var selected_option = $('option:selected', this).val();

  if (selected_option == "optionQuestion") {
    $('#availableOptions').show();
    $('#addNewOption').click(function() {
    $('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
    });
  }
});

$(document).on('click', '.removeOption', function(e) {
  e.preventDefault();
  $(this).closest('.option').remove();
})

演示：

https://jsfiddle.net/dL7opvak/21/

已编辑