How to add back element after i remove it? using .removeAttr in Jquery-CodePudding

HI i have a example with me when if select the drop down list - price by recyclables a hidden field apppear but how can i when select the Service charger the hidden field disappear

I have try using .attr to add back but it seems to be not working

$("#select-price-mode").change(function() {
  if (this.value === "Price By Recyclables") {
    $('.col').removeAttr('hidden');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <label for="select-price-mode" >Price Mode</label>
    <select  id="select-price-mode" required>
      <option selected disabled value="">Select ....</option>
      <option value="Price By Recyclables">Price By Recyclables</option>
      <option value="Service Charger">Service Charger</option>
    </select>

  </div>

  <div  hidden>
    <label for="select-payment-frequency" >Payment Frequency</label>
    <select  id="select-payment-frequency" required>
      <option selected disabled value="">Select ....</option>
    </select>

  </div>

CodePudding user response：

i think this will solve your issue

$("#select-price-mode").change(function() {
  if (this.value === "Price By Recyclables") {
    $('.col').removeAttr('hidden');
  } else {
    $('.col').attr('hidden', '');
  }
});