javascript - 如何通过 JavaScript 添加额外字段

Question

我有 2 个单选按钮，我可以在其中选择我喜欢使用的输入类型文本字段、文本区域等。现在我想添加添加 & Remove 按钮以添加额外字段或删除它们。

这是我的代码

HTML

<div class="form-group">
  <div id="moreless"></div> //show buttons
  <div class="fields" id="fields"></div> //show fields
</div>

JavaScript

<script>
  $( document ).ready( function() {

    $(".fieldtype").on('change', function() {
      var date_al = $(".fieldtype:checked").val();
      if(date_al == 'textfield') {
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<input class="form-control" type="text" name="" id="">');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }else{
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }
  });
</script>

屏幕截图

问题

我应该怎样做才能让我的添加和删除按钮正常工作？

Answer 1

您的 JavaScript 应如下所示:

var textFieldsCount = 0;

function addTextField(){
textFieldsCount++;
$('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
}

function removeTextField(elementId){
    var selector = "#" + elementId;
    console.log(selector);
    $(selector).remove();
    textFieldsCount--;
}

$(document).ready(function() {

  $(".fieldtype").on('change', function() {
    var date_al = $(".fieldtype:checked").val();
    if (date_al == 'textfield') {
      textFieldsCount++;
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs" onclick="addTextField();">Add</button>');
    } else {
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
    }
  });
});

此外，我建议您在每个文本框前面放置一个删除按钮，而不是一个删除按钮。

类似的逻辑可用于文本区域。