It would be easier if the table were put in sections correctly in the first place, using thead and tbody:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

Then it would be:

$("table.table > tbody > tr").remove();

Or if you need to keep a data row that’s identified by the text in the first column:

$("table.table > tbody > tr").filter(function() {
    return $(this.firstElementChild).text().trim() != idToKeep;
}).remove();

Live Example:

setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function() {
        return $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

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

As it is, though, you’ll have to exempt the first row:

$("table.table tr:not(:first-child)").remove();

Or if you need to keep a data row that’s identified by the text in the first column and exempt the first row:

$("table.table tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();

setTimeout(function() {
    var idToKeep = 2;
    $("table.table tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);

<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

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

You may be wondering why I used a descendant combinator (a space) rather than a child combinator (>) in that one, when I used a child combinator in the previous one. The reason is that the browser will automatically wrap your rows in a tbody element. So this would work as well:

$("table.table > tbody > tr:not(:first-child)").remove();

Or if you need to keep a data row that’s identified by the text in the first column and exempt the first row:

$("table.table > tbody > tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();

setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);

<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

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

how about using data attributes? run the snippet below.

$('ol>li>a').click( (e) =>  $('.table tr').filter(`[data-type=${$(e.target).data('type')}]`).remove());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4">
    <ol>
        <li><a href="#" data-type="1">Type</a></li>
        <li><a href="#" data-type="2">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" data-type="1">Display label</a></li>
        <li><a href="#" data-type="2">Display label 2</a></li>
    </ol>
  </div>
  <div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr data-type="1">
        <td>1</td>
        <td>something</td>
    </tr>
    <tr data-type="2">
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
    </div>
</div>

The question was already answered but I ended up using this as my solution

<script type="text/javascript">
    function show_display_specific(){
        var table = $(".table tbody");

        table.find('tr').each(function (i) {
            var $tds = $(this).find('td'),
                input_val = $tds.eq(0).text(),
                ouput_val = $tds.eq(1).text(),
                display_label = $tds.eq(2).text();
            if (display_label == idToKeep){
                // $tds.attr("hidden", false);
                console.log("this works can you belive it ", display_label);
            }else{
                // $tds.attr("hidden", true);
            }
        });
        $("#form-div").attr("hidden", false);
    }
</script>

I have a sidebar that has a list of certian attributes, which are type and display_label once either of those two attributes are clicked I want the table to be empty except for the row which corresponds to the aforementioned attributes.

I am able to get the ID of the table row which should retain, I want all the other entries gone while keeping the table header, the current solution is deleting all table rows including the header or is keeping the row that is not related.

<div class="row">
  <div class="pull-left col-4">
    <ol>
        <li><a href="#" onclick="show_type_specific(1)">Type</a></li>
        <li><a href="#" onclick="show_type_specific(2)">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" onclick="show_display_specific(1)">Display label</a></li>
        <li><a href="#" onclick="show_display_specific(2)">Display label 2</a></li>
    </ol>
  </div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
</div>

<script>
    function show_type_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
     }

    function show_display_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
      }

</script>