Question

Is it possible to hide delete button of Collection field?

Forms

Updated September 16, 2022

asked on October 24, 2014

I couldn't find a class of delete button collection field.

but I 've found class "cf-collection-append form-q" which is can hide with

CSS code following:

#qN .cf-collection-append {display:none!important} //N is field's number.

But how can I hide delete button of collection field if there isn't exist the class name?

I wish I can hide them both for preventing delete by user

Please help.Thank you,

Bongkoch

hide_collection_delete_button_001.png (51.07 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on October 24, 2014

You can use

.cf-collection-delete {display:none!important;}

2 0

replied on October 24, 2014

Hi Alexander,

Your answer does work!

So thank you very much,

Bongkoch

0 0

Replies

replied on October 24, 2014

One suggestion for you is to try using a browser with developer tools like a recent version of Firefox or IE. Learn to use the Inspector tool to find the information you need about HTML elements, attributes, and CSS rules.

Using this example, if I inspect a delete button from a collection, I get information about the nested heirarchy of HTML elements leading to it:

li#q8.form-q.cf-collection-block > div.cf-collection.clearfix.kx-repeatable > div.form-q > span.cf-collection-delete.selectable.lfi.lfi-times

So here, you can see that my collection (id=q8) has several layers of nested elements, but the important one is the one at the end with the '.cf-collection-delete' class. This tells me I can use the selector below to modify that element (in your case, set display to 'none' to hide it):

#q8 .cf-collection-delete {display:none}

That should do what you want, and hopefully help you to find what you need in the future too.

4 0

replied on October 24, 2014

Hi Scott,

Thank you for your advance answer.

You help me learn a lot of thing! Appreciate this.

Regards,

Bongkoch

0 0

replied on October 24, 2014

I'm glad you found my answer helpful!

For completeness, I just wanted to add that the difference between Alex's code and mine would be that if you had multiple collections on the same form, you could use mine to hide the delete buttons for a specific collection and Alex's to hide them for all collections.

1 0

replied on October 24, 2014

Great advice, Scott. Using a browser's web inspector comes in handy when trying to determine the various elements on a page.

0 0

replied on August 15, 2017 • Show version history

How do you hide the control with jquery? I need to show the delete object (X) for some but not all the records in the collection.

0 0

replied on September 16, 2022

Anyone figure out how to do this with JS. Like Mary, I need to do this dynamically and can't figure out how to target the Delete in JS.

@Jasonsmith ?

Thanks

0 0

You are not allowed to follow up in this post.

Question

Question

Is it possible to hide delete button of Collection field?

Answer

Replies

Sign in to reply to this post.