JSFiddle - React, Tailwind, and code Playground

by Charles Cavalcante

HTML

<div id="dark">
  <table class="table">
    <tr>
      <td><span class="price">one</span></td>
      <td><span class="price">two</span></td>
      <td><span class="price">three</span></td>
      <td><span class="price">X</span></td>
    </tr>
    <tr>
      <td><span class="price">four</span></td>
      <td><span class="price">five</span></td>
      <td><span class="price">six</span></td>
      <td><span class="price">X</span></td>
    </tr>
    <tr>
      <td><span class="price">seven</span></td>
      <td><span class="price">eight</span></td>
      <td><span class="price">nine</span></td>
      <td><span class="price">X</span></td>
    </tr>
    <tr>
      <td><span class="price">ten</span></td>
      <td><span class="price">eleven</span></td>
      <td><span class="price">twelve</span></td>
      <td><span class="price">X</span></td>
    </tr>
  </table>
</div>

CSS

.removeMe { background-color: red; }

JavaScript

$('#dark').find('.table').find('td').each(function()
{
  var price = $(this).find('.price').text();

  if(price == 'eight')
  {
    $(this).next().addClass('removeMe');
  }
});