Question

我允许用户添加多行字段，但我不想在第一行字段中包含删除链接，因此他们无法删除所有字段。

另外，我如何将其限制为只有3行字段？

Answer 1

试试这个小提琴：Fiddle

对于在第一行隐藏删除的第一部分，我在页面加载时调用了以下内容：

$(".removeoutcome").hide();

然后为了确保它们不能添加超过3个或删除最后一个，我在click方法中添加了长度检查，请参阅：

$('.addoutcome').live('click', function() {
    if ($(".outcomegroup").length < 3) {
        $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
        renumber();
    }
});

$('.removeoutcome').live('click', function() {
    if ($(".outcomegroup").length > 1) {
        $(this).closest('.outcomegroup').remove();
        renumber()
    }
});

另外，在旁注中，live现在已弃用，因此如果您使用的是jQuery 1.7，请将这些方法更改为on，或者如果您在1.7之前，请使用{{3 }}

Answer 2

您可以隐藏第一个元素的del，并使用以下代码将其限制为仅添加3个

var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
 count--;
   if(count < 0 )return;  
    $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();

});

这是工作小提琴http://jsfiddle.net/joycse06/uW9NQ/

Answer 3

更新：http://jsfiddle.net/NzbRQ/5/

首先，沟渠.live。我添加了section以提供比body更具体的选择器，但是您可以在原始DOM中使用更好的内容。

只是不要用一些简单的逻辑删除最后一行。显示未来“del”链接的逻辑实际上已经存在！你根本不需要最后一行删除逻辑，因为只是不显示“del”就足够了，但我只是彻底了。

Answer 4

我不知道为什么有人没有密切关注这一行：

.find('.minus').show();

他绝对没有隐藏del元素。简而言之，您唯一需要做的就是添加适当的CSS规则：

.minus { display: none; }

就是这样，第一个元素不会显示del链接而其他元素会显示。

简单地限制三个元素。

$("[parent element]").on('click', '.addoutcome', function() {
  if($('.addoutcome').length > 2) return;    
  ...
});

需要更好的选择器[parent selector]，完全取决于您的布局。基本上，它是包装所有这些元素的元素，它们是所有元素的父元素。

删除第一组字段上的删除按钮

4 个答案: