title: Removing automatic inline style
body: <p>I'm trying to have a table row hide until a radio button is clicked. I've tried <code>display:none;</code> but that didn't work. So when I checked out the code in my developer tools I saw that the tr has a <code>style="display: table-row;</code> which I never added and none of the other tr has it.</p>
  
  <p>I'm not sure on how to remove it so that I can hide that row.</p>
  
  <p>My code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.deliver-fee {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="delivery-option"&gt;
    &lt;div class="form-check"&gt;
      &lt;input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery"&gt;
      &lt;label for="delivery" class="form-check-label"&gt;
      Delivery
     &lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="form-check"&gt;
      &lt;input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection"&gt;
      &lt;label for="collection" class="form-check-label"&gt;
      Collection
     &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;Product&lt;/th&gt;
        &lt;th scope="col"&gt;Code&lt;/th&gt;
        &lt;th scope="col"&gt;Quantity&lt;/th&gt;
        &lt;th scope="col"&gt;Unit Price&lt;/th&gt;
        &lt;th scope="col"&gt;Total&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th colspan="4"&gt;
          &lt;div class="float-right"&gt;
            Sub Total
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;td&gt;R{{ $totalPrice }}&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="deliver-fee"&gt;
        &lt;th colspan="4"&gt;
          &lt;div class="float-right"&gt;
            Delivery Fee
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;td&gt;R{{ $delivery }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So what is supposed to happen is the <code>.delivery-fee</code> row is hidden automatically when the page has loaded and once the user has clicked on delivery then the <code>.delivery-fee</code> row is shown.</p>