javascript - Make First Ingredient永远无法删除

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

Answer 1

用 CSS 隐藏它怎么样？以下假设您向删除链接添加了一个类 delete-button:

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

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