remove specific values on a change jquery function

问题

BACKGROUND

I have 3 fields that hold certain Data. They all share common class name of polo-basket--labels.

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

Whenever i remove a value from the first div the one with

class="fancy-dropdown"

it triggers the jquery posted below and nukes all the values in the field Parent A and Parent B. Parent and Parent B are the ones with

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

Issue

However i want to change this behavior. So anytime i remove value from the

class="fancy-dropdown"

I only want to remove that value from the ParentA and ParentB div and not remove everything.

I am very new to jquery and also i never worked with .hbs so i would love any input.

What did I try so far

I figured that the last line in the Jquery function

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

is the one causing the nuke of all values so i thought maybe i can pass in data here but with no luck.

回答1:

You want to use DOM traversal to be more specific in your selector, something like this:

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

There are ways to reduce code repetition, but this gives you an idea where to start. You could simplify things dramatically by grouping the three related rows into a container, for example.

回答2:

When you are in "change" fonction, add a class to the element .

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

And after that you remove the element with that element.

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

来源：https://stackoverflow.com/questions/59887100/remove-specific-values-on-a-change-jquery-function

标签

javascript

jquery

handlebars.js