Geek asks and answers

Make the first ingredient never deleted.

I am making an ingredient application where users paste ingredients

My application looks like this: enter image description here

As you can see, the first ingredient does not have an X at the end, because you must have at least one ingredient, but the rest of the ingredients. I also use JQuery Sortable Plugin , so if you click next to any of the ingredient ranges, you can reorder the ingredients. This works great unless you move the first range of ingredients, then this range does not have an X at the end, even if you move it to the last place.

So what I'm trying to do is that there is always no X in the first layer of ingredients , even if it switched to a different range of ingredients. I tried this:

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

but it didn’t work? Any other suggestions? All help is much appreciated and here is my code:

HTML (php can just be ignored!)

<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);
+5
source share
2 answers

How to hide it using CSS? The following assumes that you have added the class delete-buttonto the delete links:

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

With this CSS, you can organize the list, add or remove items, and the first delete button will never be displayed.

+5
source

:first-child oldIE (https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes), API Sortable, :

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

(, event / ui)

, , ; HTML. , , jQuery stop ( EDIT: update) ( ).

, CSS:

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

delete-button <a>

EDIT:

Sortable stop update, , .

+2

More articles:


All Articles