Unable to Hide column in SharePoint List View web part using JSLink Client-Side-Rendering

Question

I'm trying to hide a column in List View Web Part using JS Link with Client Side Rendering. I'm able to color or make formatting changes to the column, but not able to hide it. Below is the code snippet that I have tried but it just does not displays the value rather than hiding the whole column. Here I am trying to hide column field2

var is_display;
    (function() {
        function registerMyListTemplate(){
            var  is_display = '';
            var fieldContext = {};
            fieldContext.Templates = {};
            fieldContext.Templates.Fields = {
                "field1":{
                    "View": changeView
                },
                "field2":{
                    "View": hideField
                }
            };
            fieldContext.Templates.Item = renderListItemTemplate;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
        } 
        ExecuteOrDelayUntilScriptLoaded(registerMyListTemplate, 'clienttemplates.js');
    
    })();

    function hideField(ctx){
        var op = '';
        if (is_display !== ""){
            op = "";
        }else{
            op = '<div>' + ctx.CurrentItem.field2 + '</div>';
        }
        return op;
    }

I also checked out a code which helps to hide the column in the PostRender function but it doesn't work if the List View Web Part has paging. It only works for the first page of the List View Web Part.

function postRenderHandler(){
    ["field2"].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";
        }
    });
}

Answer 1

My test code:

<script>
(function () {
    
    function RemoveFields(ctx) {
        var fieldName = "Title"; // here Date is field or column name to be hide
        var header = document.querySelectorAll("[displayname=" + fieldName + "]")[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-1; i++) {
            cells[i].style.display = "none";
        }
    }

    function registerRenderer() {
        var ctxForm = {};
        ctxForm.Templates = {};
        ctxForm.OnPostRender = RemoveFields;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();</script>

Test result:

Updated:

Answer 2

Based on the @Asmos_MSFT answer, I was able to solve my issue. To hide a specific column in List View Web Part using Client Side Rendering with JSLink, use the below code.

var is_display;
    (function() {

      function postRenderHandler(ctx) {
        var fieldName = "field2"; // here Date is field or column name to be hide
        var header = document.querySelectorAll("[displayname='" + fieldName + "']")[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-1; i++) {
            cells[i].style.display = "none";
        }
      }

        function registerMyListTemplate(){
            var  is_display = '';
            var fieldContext = {};
            fieldContext.Templates = {};
            fieldContext.Templates.Fields = {};
            fieldContext.Templates.Item = renderListItemTemplate;
            fieldContext.OnPostRender = postRenderHandler;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
        } 
        ExecuteOrDelayUntilScriptLoaded(registerMyListTemplate, 'clienttemplates.js');
    
    })();

Make sure that the function that you want to run to hide on OnPostRender is inside OnLoad function. If it is written outside the OnLoad then it might not work.

To hide same column on all available List View webparts on the page then change your OnPostRender function as below

var web_part_count = 0 // declare as global variable.

    function postRenderHandler(ctx) {
                var fieldName = "field2"; // mention the column name that needs to be hidden.
                var header = document.querySelectorAll("[displayname='" + fieldName + "']")[web_part_count].parentNode;
                web_part_count = web_part_count + 1;
                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-1; i++) {
                    cells[i].style.display = "none";
                }
              }

Before Implementing above code, make sure that the column position that needs to be hidden should be same across all the List View Web Parts present. The web_part_count variable gets incremented on the OnPostRender of each webpart hence it hides the column in each available web part on the same page.

To Implement it for multiple columns, you need to make changes to the OnPostRender function as follows

var global_arr = ['field2','field3'] // global variable

function postRenderHandler(){
    global_arr.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";
        }
    });
}

In the above function, It will loop through each of the column mentioned in the global_arr variable. Make sure that column name you mentioned in the array are available on the List View Web Part.

Hope this helps someone.