javascript - How to hide table row using Jquery hide option

Question

I've been in the process of learning JQuery. The below code is intended to add and change the dropdown options based on the <option value> of <select id = "changeId">, which is the "Parent" change function.

I would like to hide table 2 without css. I was able to hide with css but I would like to use jquery's hide option as I have read that I can hide any table row like this. $('.tableClass tr[id="tablerow_2"]').hide();

How do I get the below fiddle to work/hide without using any css only Jquery? Basically I want to start with hidding the apples then move on to hidding all three.

Fiddle: https://jsfiddle.net/wj_fiddle_playground/57rzfm9o/6/

Javascript

<script>
$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        <!--$('.exampleCSS').hide();-->
   
        //not working
        //$('#tablerow_2').hide();

        //not working
        //$('.tableClass tr[id="tablerow_2"]').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});
</script>

HTML

<table class = "tableClass">
  <tr id = "tablerow_1">
    <select id = "changeId">
    <option value="">-- Please Select --</option>
    <option value="appleValue">Apple</option>
    <option value="bananaValue">Banana</option>  
    <option value="orangeValue">Orange</option>  
    </select>
  </tr>

  <tr id = "tablerow_2">
    <select id = "appleValue" <!--class="exampleCSS"-->>
    <option value="1">Red Delicious</option>
    <option value="2">Granny Smith</option>  
    </select>
  </tr>

  <tr id="tablerow_3">
    <select id = "bananaValue">
    <option value="1">Plantain</option>
    <option value="2">Dancing Banana</option>
    </select>
  </tr>

  <tr id = "tablerow_4">
    <select id = "orangeValue" >
    <option>Blood</option>
    <option>Navel</option>
    <option>Florida</option>
    </select>
  </tr>
</table>

Answer 1

Basically I want to start with hidding the apples then move on to hidding all three.

My advice here is working with classes not with ids it will be much easier to hide all instead of selecting ids one by one.. And this is why your code not working as expected because table > tr > td You forgot to add <td></td> and everything should works fine

My advice here while you

$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        //$('.exampleCSS').hide();
   
        //works
        $('#tablerow_2').hide();

        //works
        $('.tableClass tr#tablerow_2').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableClass">
  <tr id = "tablerow_1">
    <td>
      <select id = "changeId">
        <option value="">-- Please Select --</option>
        <option value="appleValue">Apple</option>
        <option value="bananaValue">Banana</option>  
        <option value="orangeValue">Orange</option>  
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_2">
    <td>
      <select id = "appleValue" >
       <option value="1">Red Delicious</option>
      <option value="2">Granny Smith</option>   
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_3">
    <td>
      <select id = "bananaValue">
        <option value="1">Plantain</option>
        <option value="2">Dancing Banana</option>
      </select>
    </td>
  </tr>
  
  <tr id = "tablerow_4">
    <td>
      <select id="orangeValue" >
        <option>Blood</option>
        <option>Navel</option>
        <option>Florida</option>
      </select>
    </td>
  </tr>
</table>