如何通过JavaScript添加额外的字段

Question

我有2个单选按钮，我现在可以选择要使用text field, text-area, etc.的输入类型，我想添加Add和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>

Screenshot

问题

如何使Add和Remove按钮正常工作？

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>');
    }
  });
});

此外，我建议您在每个文本框的前面都有一个“删除”按钮，而不是一个“删除”按钮。

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

Answer 2

我建议使用JS的Document.createElement函数。

使用JavaScript的API创建和添加元素是一种更好，更快的方法。 This link（带有指标）很好地解释了为什么最好使用Document.createElement创建元素。

您可以在此处获得有关如何使用它的更多参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

这是单击添加按钮时可以添加新字段的方法：

$(document).on('click', '#add-btn', function() {
  var date_al = $(".fieldtype:checked").val();
  var element;
  if(date_al === 'textfield') {
      element = document.createElement("input");
      element.type = "text";
      element.className = "form-control";
  }else{
      element = document.createElement("textarea");
      element.className = "form-control";
  }

  if(element) {
      var fieldsContainer = document.getElementById('fields');
      fieldsContainer.appendChild(element);
  }

});

Answer 3

<div class="form-group">
  //show buttons
    <div class="fields" id="fields">
      <lable for='text'>text</lable>
      <input type='radio' id='text' name='element' checked>
      <lable for='textarea'>textarea</lable>
      <input type='radio' id='textarea' name='element'>
    </div> //show fields
    <div id="moreless">
      <button onclick="change('input')">
    add
    </button>
    </div>
</div>
<script>