使用jQuery删除多个文本区域框

Using jQuery to remove multiple textarea boxes

本文关键字：文本 区域 jQuery 删除 使用      更新时间：2023-09-26

我对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/

如有任何帮助，我们将不胜感激。

您正在选择.this:last，并且不存在class为this的元素。请改用textarea:last作为选择器。此外，您的标记不一致；原件应该有另一个<div>来包裹两个<textarea>。这是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，了解如何使其更清洁。

注意

您正在使用相同的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++;
    });

还有一件事

使用on()而不是live。由于您没有动态添加.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++;
    });
});

工作样本

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

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

这里有一个更新的小提琴，可以工作

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的事实，它应该是每页唯一的。

相关文章：