リストアイテムを複製して削除しますが、アイテムの場合は最初の削除を防止します

Question

私は米国の州のドロップダウンリストを持つフォームを持っています。

https://jsfiddle.net/stevieg_83/86f7ba9m/

<ul class="stateSelector" id="stateSelector"> 
<li id="TemplateRow" class="state-dropdown-row"> 

    <span class="ua-dropdown"> 
     <select name="state[]" id="state" required data-parsley-error-message="* Please select a state"> 
     <option value="">Select State</option> 
     <option value="AL">Alabama</option> 
     <option value="AK">Alaska</option> 
     <option value="AZ">Arizona</option> 
     <option value="AR">Arkansas</option> 
     <option value="CA">California</option> 
     <option value="CO">Colorado</option> 
     <option value="CT">Connecticut</option> 
     <option value="DE">Delaware</option> 
     <option value="DC">District of Columbia</option> 
     <option value="FL">Florida</option> 
     <option value="GA">Georgia</option> 
     <option value="HI">Hawaii</option> 
     <option value="ID">Idaho</option> 
     <option value="IL">Illinois</option> 
     <option value="IN">Indiana</option> 
     <option value="IA">Iowa</option> 
     <option value="KS">Kansas</option> 
     <option value="KY">Kentucky</option> 
     <option value="LA">Louisiana</option> 
     <option value="ME">Maine</option> 
     <option value="MD">Maryland</option> 
     <option value="MA">Massachusetts</option> 
     <option value="MI">Michigan</option> 
     <option value="MN">Minnesota</option> 
     <option value="MS">Mississippi</option> 
     <option value="MO">Missouri</option> 
     <option value="MT">Montana</option> 
     <option value="NE">Nebraska</option> 
     <option value="NV">Nevada</option> 
     <option value="NH">New Hampshire</option> 
     <option value="NJ">New Jersey</option> 
     <option value="NM">New Mexico</option> 
     <option value="NY">New York</option> 
     <option value="NC">North Carolina</option> 
     <option value="ND">North Dakota</option> 
     <option value="OH">Ohio</option> 
     <option value="OK">Oklahoma</option> 
     <option value="OR">Oregon</option> 
     <option value="PA">Pennsylvania</option> 
     <option value="RI">Rhode Island</option> 
     <option value="SC">South Carolina</option> 
     <option value="SD">South Dakota</option> 
     <option value="TN">Tennessee</option> 
     <option value="TX">Texas</option> 
     <option value="UT">Utah</option> 
     <option value="VT">Vermont</option> 
     <option value="VA">Virginia</option> 
     <option value="WA">Washington</option> 
     <option value="WV">West Virginia</option> 
     <option value="WI">Wisconsin</option> 
     <option value="WY">Wyoming</option> 
    </select> 
    </span> 

    <a href="#" name="DeleteBoxRow" class="DeleteBoxRow removeState state-btn">Remove State</a> 
</li> 
<li> 
    <div class="addState"> 
    <a href="#" id="AddAttr" name="AddAttr" class="clone state-btn">Add another State</a> 
    </div> 
</li> 

ユーザーが複数の状態を追加する機能を持っています。いくつかの状態を追加して最初のものを削除し、2番目のものを1番目にするなど、いくつかの問題を抱えています。

それはどのようにしてクローンを作成することができますし、限り、1項目以上がありますとして最初のアイテムの除去を可能https://www.google.co.uk/flights/#search;iti=LHR,LGW,LCY,STN,LTN,QQS__2016-07-21;tt=m

のように動作するために私が探していますか？

Answer 1

あなたはこれで複数の要素があるかどうかを評価することができます

$('#stateSelector').delegate('.DeleteBoxRow', 'click', function() { 
    if ($('#stateSelector li').length > 2) { 
    $(this).closest('li').remove(); 
    } else { 
    return false; 
    } 
}); 

Updated Fiddle

---

_{編集：あなたが削除した場合、私が見るテストの後}

最初に選択すると、新しいものを作成することができません。それは、あなたがc素敵な

var newRow = $('#stateSelector li').first().clone(true).removeAttr('id'); 

Updated Fiddle