удалить указанные c значения при изменении функции jquery - PullRequest
Новая
       5

удалить указанные c значения при изменении функции jquery

0 голосов
/ 24 января 2020

ФОН

У меня есть 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, значение с

class = "fancy-dropdown "

запускает jquery, опубликованный ниже, и обнуляет все значения в поле Родитель A и Родитель B. Родитель и Родитель B - это те, которые имеют класс

= "fancy-dropdown polo-parent-basket - tags" 

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

Issue

Однако я хочу изменить это поведение. Поэтому в любое время я удаляю значение из

class = "fancy-dropdown"

Я только хочу удалить это значение из div ParentA и ParentB, а не удалить все.

Я очень новичок в jquery, а также я никогда не работал с .hbs, поэтому мне бы понравился любой ввод.

Что я пробовал до сих пор

Я понял, что последняя строка в функции Jquery

$ ('. Polo-parent-basket - tags'). Val (null) .select2 ('destroy') .empty (). select2 ({data: options})

является причиной всех значений, поэтому я подумал, что я могу передать данные здесь, но без везения.

Ответы [ 2 ]

2 голосов
/ 24 января 2020

Вы хотите использовать обход DOM , чтобы быть более точным c в вашем селекторе, что-то вроде этого: 

  // 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});
})

Есть способы уменьшить повторение кода, но это дает Вы знаете, с чего начать. Вы можете значительно упростить ситуацию, например, сгруппировав три связанные строки в контейнер.

0 голосов
/ 24 января 2020

Когда вы находитесь в функции «изменить», добавьте класс к элементу. 

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

И после этого вы удаляете элемент с этим элементом. 

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