使用jQuery刪除多個textarea框

Question

我仍然是JavaScript和jQuery的新手。

我有jQuery“添加框”功能，用於添加動態<textarea> ，但刪除部分不起作用。

我的代碼：

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

});

演示： http ： //jsfiddle.net/dnwTV/

任何幫助將不勝感激。

Answer 1

注意

您正在創建具有相同id多個textarea 。 這個不允許。

您可以更改以下添加代碼：

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

還有一件事

而不是live ，使用on() 。 由於您沒有動態添加.Add因此您不需要live委派。 只需使用以下：

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

您的完整代碼應如下所示：

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

工作樣本

Answer 2

您選擇.this:last ，用無元素class的this存在。 使用textarea:last作為選擇器。 此外，您的標記不一致; 原來應該有另一個<div>包裝兩個<textarea> s。 這是你的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++;
    });
});​

也就是說 ，我不相信您當前的代碼要么足夠整潔或通用。 請參閱此jsFiddle ，了解如何使其更清潔。

Answer 3

這是一個有效的更新小提琴

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');
    });
});​

還修復了你重復使用html id的事實，每個頁面應該是唯一的。

Answer 4

我相信這是你想要達到的效果：

演示： http ： //jsfiddle.net/SO_AMK/dnwTV/4/

碼：

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

});​