Question

我有一张美国州下拉列表。

<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

那样的行为

如果有超过1个项目，我如何克隆并允许删除第一个项目？

Answer 1

您可以评估是否有多个元素：

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

Updated Fiddle

<子> 修改

经过测试后，我看看你是否删除了第一个选择，然后你就无法创建一个新选项，那是因为你是基于它id克隆元素，而是你可以克隆第一个元素：< / p>
var newRow = $('#stateSelector li').first().clone(true).removeAttr('id');

Updated Fiddle

克隆＆amp;删除列表项但如果是项目则阻止删除

1 个答案: