javascript - 如何使用js根据用户输入递归生成html元素？

Question

我正在编写以下 JavaScript 应用程序来从用户获取数据。当用户从选择菜单中选择值时，它会显示不同的表单元素，基于选项值。我有以下代码

HTML

<select>
    <option value="">hi</option>
    <option value="1">1</option>
</select>
<div></div>

Javascript

var myFunc = function () {
    var string = '<input><span>+</span>';
    $(string).appendTo('div');
    $('span').on('click', function () {
        myFunc();
    })
};


$('select').on('change', function () {
    var value = $(this).val();
    if (value == 1) {
        myFunc();
    }
})

我的问题是，当用户单击加号图标时，它应该显示另一个带有加号的输入元素。当用户选择最后一个加号时，应该会发生同样的事情。
但之前的加号应该变成减号。当用户单击减号时，应删除该减号下面的所有元素。

目前我的代码生成输入元素。但我不明白添加减号并删除其他元素的方法。我还需要将输入元素的数量限制为 5。请帮助我。 :)

DEMO

Answer 1

你可以试试这个:

var myFunc = function () {
    var string = '<input /><span>+</span>';
    $('div span').html('-');
    $(string).appendTo('div');
    $('span').click(function () {
        if ($(this).text() == '-')
        {
            $(this).nextAll().remove();
            $(this).html('+');
        }
        else
            myFunc(); 
    });
};


$('select').on('change', function () {
    var value = $(this).val();
    if (value == 1) {
        myFunc();
    }
})

Fiddle