Question

I am still very new to JavaScript and jQuery.

I have the jQuery “add boxes” functionality working for adding dynamic <textarea>s, but the remove portion does not work.

My code:

$(function() {
    var i = $('textarea').size() + 1;
    $('#remove').click(function() {
        if (i > 1) {
            $('.this:last').remove();
            i--;
        }
    });

    $('.Add').live('click', function(e) {
        $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');

        i++;
    });

});

Demo: http://jsfiddle.net/dnwTV/

Any help would be greatly appreciated.

Answer 1

You are selecting .this:last, and no elements with a class of this exists. Use textarea:last as a selector instead. Also, your markup is inconsistent; the original should have another <div> wrapping the two <textarea>s. Here is a corrected version of your jsFiddle.

$(function() {
    var i = $('.Option > div').size() + 1;

    $('#remove').click(function(e) {
        if (i > 1) {
            $('.Option > :last').remove();
            i--;
        }

        e.preventDefault();
    });

    $('.Add').click(function(e) {
        $('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');

        i++;
    });
});​

That said, I don’t believe your current code is either sufficiently neat or generic. See this jsFiddle for an example of how you might make this cleaner.