CODEWITHSUNDEEP
jquery
dJudge
dJudge

Reputation: 186

How to remove checkbox element based from a selected option in a Select element in jquery

I am trying to remove a checkbox element when a select option which is identical by text or value is clicked in a SELECT element. For example, when option value College GWA is selected, the equivalent CheckBox labeled College GWA should be removed.

Select Element:

 <select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option

Checkbox Element:

 <div id="div_id_features" class="form-group">
   <label for="" class=""> Feature </label>
     <div class="">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA" >
            <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>
        
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study" >
            <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>
        
        </div>
   
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre" >
          <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>       
         </div>

jQuery code:

   $("select.target_column").change(function(){
        var selected_col = $(this).children("option:selected").val();

        $("input[name='feature_manual']:contains".join(selected_col)).remove();
    });

Upvotes: 0

Views: 413

Answers (3)

CamiEQ
CamiEQ

Reputation: 771

You could use template literals to find the right selector. First, in your select element, target_column is not a class, so it'd be easier to use its id. Since the value attr in the checkbox is the same as the option, you could do this:

$("#id_target_column").change(function(){

  var selected_col = $(this).children("option:selected").val();
  const checkbox_selector = `input[value="${selected_col}"]`
  $(checkbox_selector).parent().remove();

});

and remove the parent, so the label gets removed too.

Upvotes: 0

Baro
Baro

Reputation: 5520

This version is made with the selector you were trying to use contains but obviously requires that the select values are not contained in multiple labels. Certainly charlietfl's solution is more solid.

$(document).ready(function() {

  $("#id_target_column").change(function() {
    
    var selected_col = $(this).val();
    $("input[name='feature_manual']~label:contains('" + selected_col + "')").parent().remove();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option>
</select>
<br>
  Checkbox Element:

  <div id="div_id_features" class="form-group">
    <label for="" class=""> Feature </label>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA">
      <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>

    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study">
      <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>

    </div>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre">
      <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>
    </div>

  </div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Use filter() since :contains() is only for text content and does not work with form control values.

Alternatively you could loop over all the checkboxes using each

$('#id_target_column').change(function() {
  var selVal = $(this).val()
  $("input[name='feature_manual']").filter(function() {
    var checkVal = this.value;
    return checkVal === selVal;
  }).parent().remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option>

</select>
<div id="div_id_features" class="form-group">
  <label for="" class=""> Feature </label>
  <div class="">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA">
      <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>

    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study">
      <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>

    </div>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre">
      <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>
    </div>

Upvotes: 1

Related Questions