Need to remove the row highlight after select the next row

I need to remove the row highlight when I click on the next table row.

When I'm using the below code the table row is highlighted while clicking the menu in the gear icon. Then when I click for the another table row or gear icon the existing table row highlight is not getting removed. Can anybody please provide me suggestions on how to fix this.

    click: function () {
label: 'Delete LMD Definition',
icon: 'delete',
   $("table tbody").on("click", "tr", function () {
  $("tr.selected")  // find any selected rows
     .not(this)  // ignore the one that was clicked
     .removeClass("selected");  // remove the selection
   $(this).toggleClass("selected");  // toggle the selection clicked row
});
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ember18549" class="ember-view content-table focus-group object-table container-view highlighted">
  <tbody>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
  </tbody>
</table>

Solution

This is pure jQuery and I would strongly advise against this. You should use ember if you can. But because you already use jQuery for this and don't show your ember code this is the easiest thing for you to fix.

Just add a css class for the state. Then use removeClass on all other lines and addClass on the focused line.

$(function() {
  $("table.content-table.highlighted tr.content-row").on("focusout", function() {
    $('table.content-table.highlighted tr.content-row').removeClass('my-line');
    $(this).addClass('my-line');
  });
});

.my-line {
  background: #FFFF99 none 0 0 repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="content-table highlighted">
  <tbody>
    <tr class="content-row" tabindex="0" aria-label="">
      <td>
        FOO
      </td>
      <td>
        BAR
      </td>
    </tr>
    <tr class=" content-row" tabindex="0" aria-label="">
      <td>
        BAZ
      </td>
      <td>
        BAL
      </td>
    </tr>
  </tbody>
</table>