0

我对 JavaScript 和 jQuery 还是很陌生。

我有用于添加动态<textarea>s 的 jQuery“添加框”功能，但删除部分不起作用。

我的代码：

$(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/

任何帮助将不胜感激。

4

4 回答 4

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

工作样本

于 2012-07-09T15:58:16.917 回答
1

您正在选择.this:last，并且不存在带有 aclass的元素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以获取有关如何使其更清洁的示例。

于 2012-07-09T15:58:57.790 回答
0

这是一个更新的小提琴

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这应该是每页唯一的。

于 2012-07-09T15:59:20.800 回答
0

我相信这是您想要达到的效果：

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

});​
于 2012-07-09T16:00:05.267 回答