Hiding fields in Sharepoint list view no longer working since a few days

Question

Several months ago I've implemented a solution to show icons instead of textual status values and it's been working fine since. However, since a few days, I still see the icon instead of the text, but the Javascript code to hide the column with the status in text is no longer being hidden.

I thought something may be wrong with my code, but after creating a brand new list on the Sharepoint and implementing the Javascript code for one column, I run into the exact same issue. In the attached you'll see the status icons (with the time popping up when hovering over the status icon), but you'll see the status text value and time columns not being hidden.

The function to hide these columns is:

function hideFields(ctx) 
{ 
var cell = $("div [name='Conversion_x0020_status']").closest('th'); 
var cellIndex = cell[0].cellIndex + 1; 

$('td:nth-child(' + cellIndex + ')').hide(); 
$('th:nth-child(' + cellIndex + ')').hide(); 

var cell = $("div [name='Conversion_x0020_time']").closest('th'); 
var cellIndex = cell[0].cellIndex + 1; 

$('td:nth-child(' + cellIndex + ')').hide(); 
$('th:nth-child(' + cellIndex + ')').hide(); 
}

Has anyone else been running into this or would someone know a different solution for hiding columns in list view ?

Answer 1

You could use a calculated column with html "icons" instead then just remove the original column from the list view altogether.

To use html inside calculated columns refer to this: how to show HTML code in column?

EDIT:

My bad, didn't realize it stopped working in O365.

I guess you'll need to fix your jquery selectors. ;) I just ran a quick test and the following selector works to hide the th of a column:

$('th div a:contains("COLUMN HEADER")').closest('th').hide();

To hide the individual rows for that column you'll need to inspect the page and determine what the td cell html looks like. Depending on the column type you'll need to use a selector that targets every row with that matches that column, without targetting other columns by accident. This can be tricky but you might be able to get away with something like:

$('td span:contains("Completed")').closest('td').hide();

Just think about future content in this list, because that may hide other cells that contain the word Completed by accident.

EDIT2: or just use the correct th selector and find the index as you've done previously, that's probably better, haha