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

注意

您正在使用相同的textarea创建多个id。这是不允许的。

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

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

<强> Working sample

Answer 2

您选择.this:last，并且不存在class this的元素。请改用textarea:last作为选择器。此外，您的标记不一致;原文应该包含两个<div>的另一个<textarea>。 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++;
    });
});

那说，我不相信你当前的代码要么足够整洁，要么是通用代码。 See this 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++;
    });

});

使用jQuery删除多个textarea框

4 个答案:

注意

还有一件事

您的完整代码应如下所示：