Hide a div by data-role attribute with CSS

Question

I have searched for this answer to no avail. If a div exists as such: div[data-role="form-footer"]

What is the best way to hide this, and is it possible by CSS?

I have attempted to use, to no avail (I believe because the form div is being inserted through a script):

#form div[data-role="form-footer"] {
   display: none !important;
}  

The data-roll appears on the web version of the site only. In the code, it is inserted through script tags

Answer 1

I don't have enough "reputation" to comment. Yes it is possible with CSS Just use

display:none;

To hide any element. Example:-

div[data-role="form-footer"]{
display:none;
}