Steven Grant Steven Grant - 5 months ago 11
jQuery Question

cloning & deleting list item but prevent deletion of first if it's the item

I have a form that has a US State dropdown.

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




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

The user has the ability to add multiple states. Having some trouble in having it where I can add several states and allowing the first to be deleted and have the 2nd become 1st and so on.

I'm looking for it to behave like https://www.google.co.uk/flights/#search;iti=LHR,LGW,LCY,STN,LTN,QQS__2016-07-21;tt=m

How can I clone and allow the removal of the first item as long as there's more than 1 item?

Answer

You can evaluate if there is more than one element with this:

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

Updated Fiddle


Edit:

After testing I see if you remove the first select then you aren't able to create a new one, that's because you are cloning the element based on it's id, instead you can clone the first element:

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

Updated Fiddle