克隆,删除列表项，但防止删除第一个，如果它'

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

本文关键字：删除 如果 第一个 列表 删除列 克隆      更新时间：2023-09-26

我有一个表单，它有一个US State下拉列表。

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

用户可以添加多个状态。我在添加几个状态时遇到了一些麻烦，允许第一个状态被删除，第二个状态变成第一状态，等等。

我正在寻找它的行为像https://www.google.co.uk/flights/#search;iti=LHR,LGW,LCY,STN,LTN,QQS__2016-07-21;tt=m

我如何克隆并允许删除第一项，只要有一个以上的项目?

你可以计算是否有多个元素:

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

更新小提琴

<子>编辑:

经过测试，我看到如果你删除了第一个选择，那么你就不能创建一个新的，这是因为你是基于它的id克隆元素，而不是你可以克隆第一个元素:

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

更新小提琴

相关文章：