jQuery hide\show rows in table via data attribute

Question

I have a table, #thetable which contains rows from a database. Above the table I have a button 'diesel' which I want when click to hide or show rows whose data attributes are diesel, so each row has a data-attribute that is either diesel or petrol. However when I click it the lines to not disappear.

Help would be greatly appreciated.

function clickDiesel() {
  $("tr[data-fuel=diesel]").css('visibility', 'hidden');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default" style="margin-right: 1em" onclick="clickDiesel()">
  diesel 
  <span style="color: Green">
    <i class="fa fa-check"></i>
  </span>
</button>

<table id="thetable">
  <tr data-fuel="diesel">
    <td>diesel</td>
  </tr>
  <tr data-fuel="petrol">
    <td>petrol</td>
  </tr>
</table>

Answer 1

try with

<script>
function clickDiesel()
{
    $("tr[data-fuel='diesel']").css('visibility', 'hidden');
}
</script>