删除更改 jquery 函数的特定值

Question

背景

我有 3 个字段包含某些数据。他们都有共同的 class 马球篮名称 -- 标签。

<div class="row">
    <div class="columns small-8">
        <label for="basket__label">basket  labels in the dog</label>
        <select class="fancy-dropdown" name="selected_basket__labels" id="polo-basket--labels" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../polosWithoutUncertainString this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>
</div>
<div class="row">
    <div class="columns small-6">
        <label for="basket__labels_on_parent_a">Parent A/label>
        <select class="fancy-dropdown polo-parent-basket--labels" name="basket__labels_on_parent_a[]" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../parentAsWithInsteadOfUncertain this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>
    <div class="columns small-6">
        <label for="basket__labels_on_parent_b">Parent B</label>
        <select class="fancy-dropdown polo-parent-basket--labels" name="basket__labels_on_parent_b[]" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../parentBsWithInsteadOfUncertain this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>

每当我从第一个 div 中删除一个值时

class="fancy-dropdown"

它触发下面发布的 jquery 并核对字段 Parent A 和 Parent B 中的所有值。Parent 和 Parent B 是

class="fancy-dropdown polo-parent-basket--labels"

$('#polo-basket--labels').change(function () {
  var options = _.map($(this).val(), function (basket__label) {
    return {
      id: basket__label,
      text: basket__label
    }
  })
  $('.polo-parent-basket--labels').val(null).select2('destroy').empty().select2({data: options})
})

问题

但是我想改变这种行为。所以任何时候我都会从

中删除值

class="fancy-dropdown"

我只想从 ParentA 和 ParentB 中删除该值 div 而不是删除所有内容。

我是 jquery 的新手，而且我从来没有使用过 .hbs，所以我希望有任何意见。

到目前为止我尝试了什么

我认为 Jquery 函数的最后一行

$('.polo-parent-basket--labels').val(null).select2('destroy').empty().select2({data: options})

是导致所有值核对的那个，所以我想也许我可以在这里传递数据，但没有运气。

Answer 1

您想使用 DOM 遍历 在您的选择器中更加具体，像这样：

  // go up to the nearest row element, then grab the next sibling row
  let parentA = $(this).closest('tr').next('tr');
  // ... and the one after that
  let parentB = parentA.next('tr');

  parentA.val(null).select2('destroy').empty().select2({data: options});
  parentB.val(null).select2('destroy').empty().select2({data: options});
})

有很多方法可以减少代码重复，但这会让您知道从哪里开始。例如，您可以通过将三个相关行分组到一个容器中来显着简化事情。

Answer 2

当您处于 "change" 功能时，向元素添加一个 class。

$('#theElementYouWantToSelect).attr("class", "newClassName");

然后删除包含该元素的元素。

$('.newClassName').remove();

删除更改 jquery 函数的特定值

remove specific values on a change jquery function

javascript

jquery

handlebars.js