CODEWITHSUNDEEP
javascriptjquerytextarea
slimm
slimm

Reputation: 3

Using jQuery to remove multiple textarea boxes

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.

Upvotes: 0

Views: 1768

Answers (4)

BLSully
BLSully

Reputation: 5929

here's an updated fiddle that works

http://jsfiddle.net/dnwTV/5/

Javascript:

$(function() {

    $('#remove').click(function() {
        $('.Option div:last').remove();                
    });

    $('.Add').live('click', function(e) {
        var i = $('textarea').length + 1;
        $('<div><textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i+1) + '"></textarea></div>').fadeIn('fast').appendTo('.Option');
    });
});​

Also fixed the fact that you're reusing html id's which should be unique per page.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

Note

You're creating multiple textarea with same id. It is not allowed.

You can change your add code like following:

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

And one more thing

Instead of live, use on(). As you're not adding .Add dynamically so you not need live delegation for that. Just use following:

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

Your complete code should look like:

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

    $('.Add').on('click', function(e) {
        $('<textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i + 1) + '"></textarea>').fadeIn('fast').appendTo('.Option');
        i++;
    });
});

Working sample

Upvotes: 1

user1479055
user1479055

Reputation:

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.

Upvotes: 1

A.M.K
A.M.K

Reputation: 16795

I believe that this is the effect that you are trying to achieve:

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

Code:

HTML: 

<div class='Option'><textarea id="txt"></textarea> <textarea id="txt2"></textarea> </div>
<a href="#" id="remove">Remove</a>

<br/><br/>
<span class='Add'>Add Option</span>

​jQuery:

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

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

        i++;
    });

});​

Upvotes: 0

Related Questions