Solution 1 :

If you want to specifically hide columns under the heading “Where to Buy” (which is a rather fragile approach since it relies on text that may change), you can find its index and remove those table cells:

  jQuery(function($) {
    $('.table').each(function() {
      // $this is the table element
      let colHeader = $(this).find('th:contains("Where to Buy")');
      let colIndex = colHeader.index();

      colHeader.hide();

      $(this).find('tr').each(function() { // $this is the table element
        $(this).find('td').eq(colIndex).hide(); // $this is the table row
      });
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th>Part #</th>
      <th>Description</th>
      <th>Dimensions in. (mm)</th>
      <th>Uniformly Distributed Load lbs. (kg)</th>
      <th>Containment Capacity gal. (L)</th>
      <th>Weight lbs. (kg)</th>
      <th>Where to Buy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1000
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, without drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1000" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1001
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, with drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1001" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
  </tbody>
</table>

Solution 2 :

From what you show, if you wanted to run something that would work for just running in a console, and it was always the final column. you can try something like this:

$('table td:nth-last-child(1), table th:nth-last-child(1)').hide();

Since you mention you only want to get the middle table, you can do a similar jQuery statement:

$('table:nth-of-type(2) td:nth-last-child(1), table:nth-of-type(2) th:nth-last-child(1)').hide();

However, since the count of tables could change per-page that you are visiting, so this would most likely be better as a server-side change than as an obfuscation on the serverside.

Problem :

I need to hide the last “Where to Buy” column on the table in the middle of this page. There are hundreds of product pages with this column, which is always last but not always the 4th, 5th, etc. (e.g., some tables have more columns than others).

<table class="table">
  <thead>
    <tr>
      <th>Part #</th>
      <th>Description</th>
      <th>Dimensions in. (mm)</th>
      <th>Uniformly Distributed Load lbs. (kg)</th>
      <th>Containment Capacity gal. (L)</th>
      <th>Weight lbs. (kg)</th>
      <th>Where to Buy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1000
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, without drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1000" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1001
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, with drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1001" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
  </tbody>
</table>

I’ve tried the jQuery below that I found on the web and it works to hide the header, but I can’t figure out how to hide the TD stuff.

The table has a class of .table but I can’t just hide the last child using CSS because other tables use the same class (thanks a lot web agency!).

    // Hide WTB column - MPT 1-7-2021
$('.table th:contains("Where to Buy")').css('display', 'none')

if($(".table").hasClass('ps-widget')){
   $(".ps-widget").hide();
}

Comments

Comment posted by isherwood

Also, you said you want to hide the last table column, but your attempts show something else based on content and class names. Please revise to be more clear about your goals.

Comment posted by Something in my website or project doesn’t work. Can I just paste a link to it?

Please see the FAQ

Comment posted by s.kuznetsov

Alternatively, you can get the column index by using

Comment posted by isherwood

I made a slight enhancement to accommodate cases where the column isn’t in the same position for every table. Now the index is localized to each table.

Comment posted by Zuggle

Thanks, everyone for the fast replies. I’ll read the FAQs on this site now =/

By