使用jQuery添加输入字段

Question

我对jQuery很新，所以仍然试图了解它是如何工作的。

我正在创建一个管理员面板，管理员可以插入一些问题。由于它不是固定金额，管理员应该能够添加或删除额外的输入字段，因此管理员可以选择所需的金额问题。

这是图形显示的方式：

这是代码：

            <div class="adinputfield90">
            <input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>
            </div>

span类保存图像，因此add-new输入只是另一个webfont。

我怎样才能让它工作，所以我可以添加无限量的输入字段？我应该确保如果只有一个输入我只能添加，而不是删除那个。

感谢所有帮助！

Answer 1

将其包含在页面的标题部分

中

<script>
$(function(){

  $('.adinputfield90 span').click(addTextBox);

});

function addTextBox(){
  $('.adinputfield90').append('<input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>');
  $('.adinputfield90 span').unbind('click');
  $('.adinputfield90 span').click(addTextBox);
}
</script>

Answer 2

 var template='<div class="adinputfield90">';
 template=template+'<input type="text" placeholder="Insert question 1"> 
 <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span>
  </input>';
  template=template+'</div>'


  $("#htmlContainerId").append(template);

htmlContainerId - 我们要插入内容的容器。这将是'adinputfield90'之外的元素，即'adinputfield90'的容器

Answer 3

试试这个。

$('.adaddnextremove').on('click', function(){
    $(this).parent().clone(true).appendTo('body');
    $('.remove').show();
    $('.adaddnextremove').hide();
    $('.adinputfield90').last().find('.remove').hide();
    $('.adinputfield90').last().find('.adaddnextremove').show();
});
$('.remove').on('click', function(){
    $(this).parent().remove();
});

Fiddle Demo