Hide more than one list column with JSlink

Question

I am using CSR against two columns, both of which I need to hide from the list view.

I have used this example to successfully hide one:

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

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

but I also need to hide another column and am struggling to do so - I've tried writing a separate function with new variable names but this doesn't work. Can I add a further column into the existing hideFields function ?

Answer 1

Try this one, you just need to replace the values in the array in line 2:

OnPostRender: function(ctx) {
    ["col1", "col2"].forEach(function(name) {
        var header = document.querySelectorAll("[displayname=" + name + "]")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
            cells[i].style.display = "none";
        }
    });
}

(jQuery is not necessary for this script)

Answer 2

Our farm didn't like the Vanilla JS of Daniel's answer so I ported it over to jQuery

["col1", "col2"].forEach(function(name) {   
        var header = jQuery("[displayname='" + name + "']").parent();

        var siblings = header.parent().children();
        var index = siblings.index(header) + 1;

        header.hide();

        jQuery("td:nth-child(" + index + ")").hide();

    });

Answer 3

I believe that both answers are useful and work well. The only remark that I would like to review in both codes is to avoid using "displayname" from DOM. Using the "name" selector is much better. It will help to avoid encoding mistakes and matching wrong field name, especially if you using non-latin international names for your fields. For expamle: var header = document.querySelectorAll("[name=" + name + "]")[0].parentNode; for Daniel's code and var header = jQuery("[name='" + name + "']").parent(); for the example.