Question

I have a form where several fields may have multiple inputs, i.e.

• Your Name
• Songs you like: [add more!]
• Movies you like: [add more!]
• shows you like: [add more!]

I’m still new and have been looking around for tutorials. It seems like quite a bit of them tend to focus on just one field and tend to have input markup in the javascript, which makes it seem like I’d have to copy and paste the script for each different input field. i.e. this one:
http://muiomuio.com/web-design/add-remove-items-with-jquery

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() {
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
 });

Is there a way to streamline this? Thank you so much for your help!

Answer 1

Have a look at this jsFiddle. I wrote a script for adding the fileds but it would be similar for removing them.

Hve fun

K