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

Question

http://jsfiddle.net/NzbRQ/2/

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

另外，如何将其限制为仅 3 行字段？

Answer 1

试试这个小提琴：小提琴

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

$(".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 之前的版本，请使用delegate.

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]，并且完全取决于您的布局。基本上，它是包装所有这些元素的元素，它们的父元素。