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

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/

已编辑