How to hide a specific css class in form view

[georgechen]

Hi folks,

I have an embedded list in a form layout, in the list there is a '+' sign on the new row which is an indicator to the users that they can insert a new row, however, some of our clients consider this '+' sign is kind of confusing as they cannot click on it.

Therefore I have been understanding how to achieve this;   firstly I raised a community forum at https://community.servicenow.com/message/1242922?et=watches.email.thread#1242922   and it replied a approach of using "document.getElementById('pass the actual DOM Id').style.display="none";"

however, what I found is that the DOM id keeps changing each time when the form gets rendered.       Breaking the element down, I further found a class named 'list_edit_image icon-add btn disabled' would not change each time it loads (see screenshot below)

If manually set css code in my Chrome Debugger,

the '+' successful removes which is great!

So I tried to incorporate this css into an onLoad client script to fetch the class, and then attempt to set the style.display='none'

var x= document.getElementsByClassName("list_edit_image.icon-add.btn.disabled");

x.style.display='none';

this has failed, but when alerting the x object, it pops up

the object was found.   I also tested the x.length which returns 0

I am not sure if I am on the right track on this , but wondering if any one could advise.

Thanks in advance.

[georgechen]

Thanks Raju.   the list.length returned 0 and the + sign still visible

It's line 5 where the ClassName might have not been found "var list=document.getElementsByClassName('list_odd list_row list_add');"

It's so close that it nearly gets right!

[georgechen]

Hey Askash,   just realised it's so close to get this right.

This has seemed to change the bg colour of the + sign

[Raju Koyagura]

try to change the wait time

window.setTimeout(hideSign,5000);

[Raju Koyagura · Accepted solution]

Change the wait time till you get the list.length value 1.

function onLoad() {

window.setTimeout(hideSign,5000); //wait to load embeded list on the form

function hideSign(){

var list=document.getElementsByClassName('list_odd list_row list_add');

//var list=document.getElementsByClassName('list_decoration');

alert(list.length);

for (var i = 0; i < list.length; i++) {

if(list[i].id)

document.getElementById(list[i].id+'_edit').style.display="none";

}

}

}

[georgechen]

Hey Raju

Functionality wise it works as expected, but it seems to work intermittently.     for example, when the form first loads the + sign becomes hidden, but when reloading the form, the + appears again.     I am writing an else condition where the list.length==0,

function onLoad() {

window.setTimeout(hideSign,3000); //wait to load embeded list on the form

function hideSign(){

var list=document.getElementsByClassName('list_odd list_row list_add');

//var list=document.getElementsByClassName('list_decoration');

alert(list.length);

if (list.length>0) {

for (var i = 0; i < list.length; i++) {

if(list[i].id)

document.getElementById(list[i].id+'_edit').style.display="none";

}

} else {

var list2 = document.getElementsByClassName("list_decoration");

alert (list2.length);

for (var j=0; j<list2.length;j++) {

if (list[j].id)

alert (list[j].id);

//document.getElementById(list[j].id+'_edit').style.display="none";

}

}

}

}

But the list[j].id returns nothing always.