使第一个成分无法被删除

Question

我正在制作一个食材应用程序，用户可以插入食材。

我的应用程序长这样： 如您所见，第一个食材跨度末尾没有X，因为必须至少有一个食材，但其他食材跨度都有。我还使用了Jquery Sortable Plugin，因此如果您在任何食材跨度的外部附近点击，可以更改食材的顺序。 这是有效的，但是如果您移动第一个食材跨度，则即使将其移动到最后一位，该跨度也没有X。

所以我想做的是使第一个食材跨度始终没有X，即使与其他食材跨度交换顺序。我试过了这个：

$('ingredientsCOUNT > span:first').hide(deleteButton);

但它没有起作用？还有其他建议吗？非常感谢您的帮助，这是我的代码：

HTML（可以忽略php！）

<div class='formelementcontainer funky'>
        <label for="ingredient">Ingredients</label>
        <div id='ingredientsCOUNT' class='sortable'>
            <span>
                <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
                <select name='measurements'>
                    <option value='' name='' checked='checked'>--</option>
                    <?foreach ($measurements as $m):?>
                        <option value='<?=$m->id;?>'><?=$m->measurement;?></option>
                    <?endforeach;?>
                </select>
                <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
            </span>
        </div>
        <div class="clear"></div>
        <div class='addSPAN tabover'>
            <a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
        </div>
</div>

jQuery

(function($) { 
$(document).ready(function () {
    $('#btnAddIngredients').click(function () {
        var num = $('#ingredientsCOUNT span').length;
        var newNum = new Number(num + 1);
        var deleteButton = $("<a class='float-right' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>");
        deleteButton.click(deleteThis);
        $('#ingredientsCOUNT > span:first')
            .clone()
            .attr('name', 'ingredient' + newNum)
            .append(deleteButton)
            .appendTo('#ingredientsCOUNT')
            .fadeIn();
        $('ingredientsCOUNT > span:first').hide(deleteButton); //THIS IS MY SOLUTION THAT DIDN'T WORK
    });
    function deleteThis() {
        var span = $(this).closest('span')
        span.fadeOut('slow', function() { span.remove(); });
    }
    $( ".sortable" ).sortable();       //jQuery Sortable initialized
});

})(jQuery);

- Muhambi

---

可以使用CSS（bfavaretto建议的方法）或Sortable API来确定在列表排序后要隐藏/显示哪些删除元素（不是列表中的第一个）。 - Ian

Answer 1

如何使用CSS隐藏它？以下假设您已经为删除链接添加了一个类delete-button:

#ingredientsCOUNT > span:first-child .delete-button { display: none; }

通过使用这个CSS，你可以重新排列列表、添加或删除项目，并且第一个删除按钮将永远不会显示。

- bfavaretto

---

唯一的问题是在旧版IE中出现了古怪的行为 :( - Ian

@Ian 确实，这将是IE8+（请参见http://caniuse.com/#search=%3Afirst-child）。但是，也许一个Web 2.0-ish应用程序不应该支持旧的浏览器... - bfavaretto

只是想指出一下 :) 我讨厌处理支持旧浏览器的问题，但这可能对 OP 很重要。我看到了 https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes，其中提到 IE7 中动态内容存在问题。 - Ian

@bfavaretto 感谢您的回答。我可能不会支持<IE8，所以这应该没问题。 - Muhambi

Answer 2

由于在旧版IE中 :first-child 存在一些问题（https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes），因此可以使用 Sortable API 来实现以下功能：

$(".sortable").sortable({
    update: function (event, ui) {
        var rows = $("#ingredientsCOUNT").children("span");
        rows.removeClass("first-child");
        rows.first().addClass("first-child");
    }
});

（有可能有更好的方法来利用 event 和/或 ui 参数）

这样，您就不必确定要向哪一行添加删除按钮；您可以在 HTML 中的每一行中始终包含一个删除按钮。然后，在进行排序时，stop 事件 (编辑： update 事件) 中的 jQuery 将隐藏第一行的删除按钮并显示其余行的按钮（通过类名）。

当然，您需要下面这些 CSS：

#ingredientsCOUNT > span.first-child a.delete-button {
    display: none;
}

为您的删除按钮<a>添加一个delete-button类。

编辑：

我将Sortable方法从stop更改为update，以便仅在排序排列实际更改后（排序完成后）运行代码。

- Ian