Disable remove row (X) in a MRVS

[MiliReinoso]

Hi, I'm writing a script to disable a few buttons of a MRVS, but my script doesn't work with the remove rox (x). I'm seeing a few post about it but the scripts that i saw didn't work either, I believe it's something wrong with what i wrote. I will let more information about it down below. 

function onCondition() {

    var daysOfWeek = [{
            name: "Monday",
            isWeekday: true
        },
        {
            name: "Tuesday",
            isWeekday: true
        },
        {
            name: "Wednesday",
            isWeekday: true
        },
        {
            name: "Thursday",
            isWeekday: true
        },
        {
            name: "Friday",
            isWeekday: true
        },
        {
            name: "Saturday",
            isWeekday: false
        },
        {
            name: "Sunday",
            isWeekday: false
        }
    ];

    var varValues = [];

    daysOfWeek.forEach(function(dayObj) {

        varValues.push({
            days: dayObj.name,
            start_time: '',
            end_time: '',
            select_if_you_work: dayObj.isWeekday ? 'Yes' : 'No'
        });
    });

    g_form.setValue('business_hours', JSON.stringify(varValues));

    var my_var = g_form.getField("business_hours"); //use your variable set name here
    //The number below indicates after how many rows, the add button to disaable. 
    //If you want to limit to 5 rows then mention 5 below. 
    //If you put 0, it will disable Add button without checking the rows.
    my_var.max_rows_size = 5;

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

    function disableButtons() {
        var my_var = g_form.getField("business_hours"); //use your variable set name here
        my_var.max_rows_size = 0;
        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';
            }
        }
        //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.
        //MRVS is loaded after the catalog item is loaded. Hence setting a delay of 1 secs.

        //Hide each X (delete row) icon on MRVS
        var icon = this.document.getElementsByClassName('wrapper-xs fa fa-close');
        for (j = 0; j < icon.length; j++) {
            if (icon[j].getAttribute("title") == 'Remove Row') {
                icon[j].style.display = 'None';
            }
        }
    }
}

[pavani_paluri]

Hi @MiliReinoso ,

The issue isn’t your logic, it’s mainly the selectors and the timing of when the MRVS actually renders. Please try below version:

function onCondition() {
var daysOfWeek = [
{ name: "Monday", isWeekday: true },
{ name: "Tuesday", isWeekday: true },
{ name: "Wednesday", isWeekday: true },
{ name: "Thursday", isWeekday: true },
{ name: "Friday", isWeekday: true },
{ name: "Saturday", isWeekday: false },
{ name: "Sunday", isWeekday: false }
];

var varValues = [];

daysOfWeek.forEach(function(dayObj) {
varValues.push({
days: dayObj.name,
start_time: '',
end_time: '',
select_if_you_work: dayObj.isWeekday ? 'Yes' : 'No'
});
});

g_form.setValue('business_hours', JSON.stringify(varValues));

var my_var = g_form.getField("business_hours");
my_var.max_rows_size = 5;

// Use MutationObserver to wait until MRVS is rendered
var observer = new MutationObserver(function() {
disableButtons();
});

observer.observe(document.body, { childList: true, subtree: true });

function disableButtons() {
// Disable "Remove All" button
var btns = document.querySelectorAll('.btn.btn-default');
btns.forEach(function(btn) {
if (btn.innerText.trim() === 'Remove All') {
btn.disabled = true;
}
});

// Disable "Add" button if needed
var addBtns = document.querySelectorAll('.btn.btn-primary');
addBtns.forEach(function(btn) {
if (btn.innerText.trim() === 'Add') {
btn.disabled = true;
}
});

// Hide each X (remove row) icon
var icons = document.querySelectorAll('.fa-times');
icons.forEach(function(icon) {
if (icon.title === 'Remove Row') {
icon.style.display = 'none';
}
});

observer.disconnect();
}
}

Key changes:
- Use querySelectorAll instead of getElementsByClassName.
- Target .fa-times for the row delete icon (instead of fa-close).
- Added a MutationObserver so the script waits until the MRVS is actually rendered, instead of relying on a fixed timeout.

With these adjustments, the “Remove All” and “Add” buttons are disabled, and the “Remove Row” icons are hidden once the MRVS loads.

Mark it helpful if this helps you to understand. Accept solution if this give you the answer you're looking for

Kind Regards,

Pavani P

[Ankur Bawiskar]

@MiliReinoso 

to hide that you need DOM manipulation which is not recommended

check this

Disable buttons in MultiRow Variable Set 

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Tanushree Maiti]

Hi @MiliReinoso ,

Refer this : Disable buttons in MultiRow Variable Set

It is feasible using DOM but DOM manipulation is strongly discouraged in ServiceNow client-side scripting because it directly accesses HTML elements, which can break during platform upgrades. Using methods like document.getElementById() or jQuery etc makes scripts fragile and unsupportable, as ServiceNow frequently updates UI structure.