javascript - 使用 jquery 生成表单字段

Question

我有一个非常基本的表单，允许用户发布简单的分类广告。它看起来像这样:

<form action="">
    <fieldset>
        <h3>Personal Informations</h3>
        <input type="text" placeholder="Your Name">
        <input type="text" placeholder="Your Address">
    </fieldset>

    <fieldset>
        <h3>Car Informations</h3>

        <input type="text" placeholder="Manufacturer">
        <input type="text" placeholder="Model">     
        <input type="text" placeholder="Year">

        <a href="#">Add More Ads</a>

    </fieldset>
</form>

我希望允许访问者通过“添加更多广告”按钮/链接发布更多广告，这将根据访问者需要的广告次数生成相同的 3 个字段。

最简单的解决方案是什么？任何帮助/指导都会很棒!谢谢!

P.S 此外，如果用户也可以删除不需要的字段，那就太好了

Answer 1

试试这个。

$('#addMOre').on('click',function(){
  var self = $('.apendable').first().clone().insertAfter(".apendable:last");
  $('.apendable:last input').val('');
  self.append('<button class="close-info">close</button>');
  $('.close-info').on('click', function(){
     $(this).parent().remove();
  })
})

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <form action="">
            <fieldset>
                <h3>Personal Informations</h3>
                <input type="text" placeholder="Your Name">
                <input type="text" placeholder="Your Address">
            </fieldset>
        
            <fieldset id="info">
                <h3>Car Informations</h3>
                <div class="apendable">
                <input type="text" placeholder="Manufacturer">
                <input type="text" placeholder="Model">     
                <input type="text" placeholder="Year">
                </div>
                <a href="#" id="addMOre">Add More Ads</a>
        
            </fieldset>
        </form>