Hide edit row button on specific row of MRVS

[TracyC]

I've got the below script working to hide Remove All button and Close button for all rows in my MRVS.  Is it possible to also hide the edit pencil just for the first row?  Outcome would be for the user to be able to add rows and edit any rows past the first row.  This is being done on the service portal.  (references are included in the script below)

//https://www.servicenow.com/community/developer-articles/disable-buttons-in-multirow-variable-set/ta-p/2304435


function onLoad() {
    //MRVS is loaded after the catalog item is loaded. Hence setting a delay of 2 secs.
    setTimeout(function() {
        disableButtons();
    }, 1000);
}

function disableButtons() {
    var my_var = g_form.getField("household_members"); //use your variable set name here
    // my_var.max_rows_size = 0;  //this line disables the Add button entirely

    // Hide Remove All button
    var btn = this.document.getElementsByClassName("btn btn-default");
    for (i = 0; i < btn.length; i++) {
        if (btn[i].innerText == 'Remove All') {
            btn[i].disabled = "disabled";
            //If you want to hide it fully, then use below line.
            btn[i].style.display = 'None';
        }
    }

    // Hide edit button
    var icon = this.document.getElementsByClassName("wrapper-xs.fa.fa-pencil");
    for (j = 0; j < icon.lentgh; j++) {

        if (icon[j].getAttribute("title") == 'Edit Row') {
            icon[j].style.display = 'None';
        }
    }

    // If you want to hide Add button as well, you can use above logic, 
    // but use the class name as btn-primary instead of btn-default 
    // and change the if condition to Add.



    // Hide Remove Row buttons
    //https://www.servicenow.com/community/developer-articles/disable-buttons-in-multirow-variable-set/tac-p/2304456/highlight/true#M1485

    var sheets = this.document.styleSheets;
    var sheet = sheets[0];
    //This hides the row-level buttons
    sheet.insertRule('a.fa-close { display: none !important; }');
	//sheet.insertRule('a.fa-pencil { display: none !important; }')
    //This hides the Add/Remove All buttons, use your internal MRVS name
    // sheet.insertRule('#household_members button { display: none !important; }'); //add button

}

[Nick Parsons · Accepted solution]

You can do this with DOM manipulation (which is discouraged, but since you're currently using it in your script I imagine it's not an issue for you):

var firstPencilIcon = this.document.querySelector("a.fa.fa-pencil");
if(firstPencilIcon) firstPencilIcon.remove();

First, select the pencil-icon on the page with querySelector (this selects the first match, hence the one from the first row), and then delete it with remove. I've added an if-statement to do a check to ensure the element exists before it's removed to avoid potential errors.

You can check the browser support for these methods here:

• querySelector: https://caniuse.com/queryselector
• remove: https://caniuse.com/mdn-api_element_remove

[TracyC]

Thank you!  I know it's not the ideal method but for this case, it's for the best.