当用户在 jquery 中按下按钮时添加更多输入字段答案

【问题标题】：Add more input fields when user press button in jquery当用户在 jquery 中按下按钮时添加更多输入字段
【发布时间】：2016-11-10 19:37:50
【问题描述】：

我是 jquery 的新手，我需要一些帮助。我有用户输入标题的模式。当用户输入标题时，新的 div 将显示该 div 包含一个输入字段或一个 addmore 按钮，当用户单击 addmore 按钮时，新的输入字段将打开。我希望用户在显示警报消息后添加多达 18 个文件。

这是我的html代码：-

enter code here
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Add Category</h4>
        </div>
        <div class="modal-body">
            <h4>Enter Your Title</h4>
            <input type="text" name="title" class="getvalue">
            <button type="submit"  class="submitdata"> Submit</button>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

还有我的 Jquery 代码

enter code here
$(document).ready(function() {
    var room= 1;
    $(".submitdata").on('click',function(){
        var value= $(".getvalue").val();
        $(".submitdata").attr('disabled');
        $(".modal-body").after(
            '<br><center><div id="contain"> 
            Choose Your Own service <br> <br>
            <input type="text" name='+value+'[]>
            <button type="button" class="addService">Add More</button>
            </div></center>'
            );
        $(".addService").on('click',function(){
              //Please anyone do coding here
        });
    });

谢谢你 :)

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这样的：

HTML

<div id="contain"> 
  Choose Your Own service <br> <br>
  <div>
  <input type="text" name='+value+'[]>
  <button type="button" class="addService">Add More</button>
  </div>
</div>

$(document).on('click', '.addService', function(){
    var html = '<div><input type="text" name="myInput"><button type="button" class="addService">Add More</button></div>';
  $(this).parent().append(html);
});

Working Fiddle

【讨论】：

Mayank 感谢您重新添加您添加的 js 工作正常我想要删除按钮而不是添加按钮。你能写代码吗
谢谢你工作正常。剩下的一件事我希望用户不能添加超过 5 个输入，您能否再次更新您的小提琴。再次感谢
Mayank 检查你的小提琴，首先添加 5 个输入字段并删除所有创建的字段，然后尝试添加新文件它给我警告你不能添加更多

【解决方案2】：

$('.submitdata').on('click',function(){
      $(this).before($(this).closest('.getvalue').clone());
      $(this).closest('.getvalue').val('');
})

【讨论】：