Removing automatic inline style

Question

I'm trying to have a table row hide until a radio button is clicked. I've tried display:none; but that didn't work. So when I checked out the code in my developer tools I saw that the tr has a style="display: table-row; which I never added and none of the other tr has it.

I'm not sure on how to remove it so that I can hide that row.

My code

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "collection") {
      $(".deliver-fee").hide('slow');
    }
    if ($(this).attr("value") == "delivery") {
      $(".deliver-fee").show('slow');
    }
  });
  $('input[type="radio"]').trigger('click');
});

.deliver-fee {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-option">
  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
    <label for="delivery" class="form-check-label">
				Delivery
			</label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
    <label for="collection" class="form-check-label">
				Collection
			</label>
  </div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Code</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">
        <div class="float-right">
          Sub Total
        </div>
      </th>
      <td>R{{ $totalPrice }}</td>
    </tr>

    <tr class="deliver-fee">
      <th colspan="4">
        <div class="float-right">
          Delivery Fee
        </div>
      </th>
      <td>R{{ $delivery }}</td>
    </tr>
  </tbody>
</table>

So what is supposed to happen is the .delivery-fee row is hidden automatically when the page has loaded and once the user has clicked on delivery then the .delivery-fee row is shown.

Answer 1

You already have the item hide at the beginning via the css - this works perfectly.

But then you show it with:

$('input[type="radio"]').trigger('click');

the reason the delivery fee app appears briefly and then hides is because the above code runs twice (as you have 2x input[type='radio']) - first time for delivery, so calls .show() then for collection so calls hide.

jQuery queues animations, which includes .hide and .show. You could use .finish(), as in

  $(".deliver-fee").finish().hide('slow');

but this would just hide the issue.

The easiest option is to just remove that line and wait for user to click. If you need the delivery fee shown based on preloaded info, then only run it for the :checked item

$('input[type="radio"]:checked').trigger('click');

Updated snippet:

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "collection") {
      $(".deliver-fee").hide('slow');
    }
    if ($(this).attr("value") == "delivery") {
      $(".deliver-fee").show('slow');
    }
  });
  // Don't show+hide delivery fee
  //$('input[type="radio"]').trigger('click');
});

.deliver-fee {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-option">
  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
    <label for="delivery" class="form-check-label">
        Delivery
    </label>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
    <label for="collection" class="form-check-label">
        Collection
    </label>
  </div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Code</th>
      <th scope="col">Quantity</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">
        <div class="float-right">
          Sub Total
        </div>
      </th>
      <td>R{{ $totalPrice }}</td>
    </tr>

    <tr class="deliver-fee">
      <th colspan="4">
        <div class="float-right">
          Delivery Fee
        </div>
      </th>
      <td>R{{ $delivery }}</td>
    </tr>
  </tbody>
</table>

---

Regarding display:table-row - this is a red herring. jQuery is clever enough to see that you are calling .show() against a table row, so rather than add display:block it adds display:table-row.

This there because your js code calls .show() on that tr.