how to generate html elements recursively base on user input with js?

Question

i am writing following javascript application to get the data from user. When user select the values from select menu, it show different form elements, based on the option value. I have following code

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

My question is when the user click on the plus icon it should show another input element with the plus mark. when user select the last plus mark same thing should happen.
but the previous plus marks should become a minus. and when the user click on minus all the element below to the that minus mark should be removed.

currently my code generates the input elements. but i dont understand the way of adding a minus marks and removing other elements. and also i need to limit the number of input elemnts to 5. Please help me. :)

DEMO

Try this answer stackoverflow.com/questions/22322218/…

Rakesh Kumar
– Rakesh Kumar

2014-03-19 05:34:02 +00:00
Commented Mar 19, 2014 at 5:34 — Rakesh Kumar
– Rakesh Kumar, Commented Mar 19, 2014 at 5:34

H77 · Accepted Answer · 2014-03-19 05:42:45Z

1

You can try this:

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

answered Mar 19, 2014 at 5:42

H77

5,9772 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to generate html elements recursively base on user input with js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related