删除更改 jQuery 函数上的特定值

Question

背景

我有 3 个字段保存某些数据。它们都共享马球篮标签的共同类名。

<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 中删除一个值时，就会使用

类="花式下拉列表">

它触发下面发布的jquery，并删除字段父A和父B中的所有值。

class="花式下拉马球-父母篮子--标签">

$('#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})
})

问题

但是我想改变这种行为。所以每当我从

类="花式下拉列表">

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

我对jquery很陌生，而且我从未使用过.hbs，所以我喜欢任何输入。

到目前为止我尝试了什么

我认为 Jquery 函数的最后一行

$('.

polo-parent-basket--labels'(.val(null(.select2('destroy'(.empty((.select2({data： 选项}(

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

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

当您处于"更改"状态时，向元素添加一个类。

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

之后，您删除带有该元素的元素。

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