Fai primo ingrediente mai in grado di essere cancellato

Question

sto facendo un programma in cui gli utenti inseriscono ingredienti ingredienti

La mia applicazione si presenta così:

Come si può vedere, la durata primi ingredienti non ha a X alla fine, perché è necessario disporre di almeno un ingrediente, ma il resto degli span ingrediente lo fa. Sto anche usando il Jquery Sortable Plugin quindi, se clicchi vicino a una qualsiasi parte degli ingredienti, puoi modificare l'ordine degli ingredienti. Funziona bene, tranne nel caso in cui si sposti la prima campata di ingredienti, quindi quella span non ha un X alla fine, anche se lo si sposta nell'ultimo punto.

Quindi quello che sto cercando di fare è rendere il primo span di ingredienti sempre senza X alla fine, anche se commutato l'ordine con un altro arco di ingredienti. Ho provato questo:

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

ma non ha funzionato? Qualche altro suggerimento? Ogni aiuto è molto apprezzato, ed ecco il mio codice:

HTML (il php può semplicemente essere ignorato!)

<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

Che ne dite di nasconderlo con i CSS? Di seguito si presuppone si è aggiunto una classe delete-button ai vostri collegamenti di eliminazione:

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

Con che i CSS, è possibile riordinare l'elenco, aggiungere o rimuovere elementi, e il primo tasto di cancellazione non mostrerà mai.

Answer 2

Da :first-child è eccentrico a oldIE (https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes), è possibile utilizzare il Sortable API simili:

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

(probabilmente c'è un modo migliore per utilizzare il event e/o ui parametri)

In questo modo, non è necessario determinare a quale riga aggiungere un pulsante di eliminazione; includi sempre un pulsante di eliminazione in ogni riga del tuo codice HTML. Quindi, quando viene effettuato un ordinamento, il jQuery nell'evento stop (evento) nasconde il pulsante di eliminazione della prima riga e mostra il resto (tramite le classi).

Naturalmente, si avrebbe bisogno di questo CSS:

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

E per aggiungere una classe delete-button ai pulsanti di cancellazione <a>

EDIT:

ho cambiato il metodo di Sortable da stop a update in modo che esegua il codice solo quando la disposizione di ordinamento è effettivamente cambiata, dopo le sorti ng è fatto.