Unable to hide Delete button on all rows of the table using Jquery

Question

The code below is the implementation of file upload by using jQuery FileUpload by Blueimp. The code is a partial and is part of a view in a .Net Core project. The code is working fine as expected.

<!-- The file upload form used as target for the file upload widget -->
                <form class="fileupload" method="POST" enctype="multipart/form-data">
                    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                    <div class="row fileupload-buttonbar">
                        <div id="divFileButtons" class="col-lg-7">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-tertiary btn-min-width fileinput-button">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                <span>Add files...</span>
                                <input title="File uploader" type="file" name="files[]" multiple>
                            </span>
                        </div>
                    </div>

                    <!-- The table listing the files available for upload/download -->
                    <div style="padding-bottom:8px">Documents uploaded or selected for upload will appear in the section below.</div>
                    <table id="tblFiles" role="none" class="table table-striped">
                        <tbody class="files"></tbody>
                    </table>
                </form>

                <!-- The template to display files available for upload -->
                <script id="template-upload" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                    <tr class="template-upload fade">
                        <td>
                            <p class="name">{%=file.name%}</p>
                            <strong class="error text-danger"></strong>
                        </td>
                        <td>
                            <p class="size">Processing...</p>
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                        </td>
                        <td>
                            {% if (!i && !o.options.autoUpload) { %}
                            <button class="btn btn-primary start" disabled>
                                <i class="glyphicon glyphicon-upload" aria-hidden="true"></i>
                                <span>Upload</span>
                            </button>
                            {% } %}
                            {% if (!i) { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
                                <span>Cancel</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>

                <!-- The template to display files available for download -->
                <script id="template-download" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                    {% if (!file.extra) file.extra = { originalName: file.name }; %}
                    <tr class="template-download fade">
                        <td>
                            <p class="name">
                                {% if (file.url) { %}
                                <a href="{%=file.url%}" title="{%=file.extra.originalName%}" download="{%=file.name%}">{%=file.extra.originalName%}</a>
                                {% } else { %}
                                <span>{%=file.name%}</span>
                                {% } %}
                            </p>
                            {% if (file.error) { %}
                            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                            {% } %}
                        </td>
                        <td>
                            <span class="size">{%=o.formatFileSize(file.size)%}</span>
                        </td>
                        <td>
                            {% if (file.deleteUrl) { %}
                            
                               <div hidden>
                                     <button type="button" hidden id="{%=file.name.replaceAll('.','').replaceAll(' ','').replaceAll('#','').replaceAll('$','').replaceAll('!','').replaceAll('`','').replaceAll('~','').replaceAll('$','').replaceAll('^','').replaceAll('&','').replaceAll('(','').replaceAll(')','').replaceAll('[','').replaceAll(']','').replaceAll('{','').replaceAll('}','').replaceAll(';','').replaceAll(',','').replaceAll('%','').replaceAll('+','').replaceAll('@@','').replaceAll('=','').replaceAll('\'','')%}"  name="{%=file.name%}" class="btn btn-severe delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                                     </button>
                               </div>
                                    <a title="Delete document" name="deleteDocument" href="#" class="btn btn-severe deleteDocument" data-id="{%=file.name.replaceAll('.','').replaceAll(' ','').replaceAll('#','').replaceAll('$','').replaceAll('!','').replaceAll('`','').replaceAll('~','').replaceAll('$','').replaceAll('^','').replaceAll('&','').replaceAll('(','').replaceAll(')','').replaceAll('[','').replaceAll(']','').replaceAll('{','').replaceAll('}','').replaceAll(';','').replaceAll(',','').replaceAll('%','').replaceAll('+','').replaceAll('@@','').replaceAll('=','').replaceAll('\'','')%}" data-name="{%=file.name%}" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" >
                                   <i class="glyphicon glyphicon-trash color-confirm-red" aria-hidden="true"></i>
                               <span>Delete</span></a>
                                                               
                            @*<input type="checkbox" name="delete" value="1" class="toggle">*@
                            {% } else { %}
                            <button class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
                                <span>Cancel</span>
                            </button>
                            {% } %}
                        </td>
                    </tr>
                    {% } %}
                </script>

In a particular page I want the add new file and the delete existing file buttons to be hidden. This is my jquery code. The hiding of add new file is working fine however the delete file is not working. I have tried multiple methods but it is not working. What am I missing?

$(document).ready(function() {
    //This code works.
    $('.fileupload').find("#divFileButtons").hide();

    //None of these above codes work.
    $('.fileupload').find('.deleteDocument').hide();
    $('.fileupload .deleteDocument').hide();
    $(document).find('.fileupload .deleteDocument').hide();
                
    $('#tblFiles').find('.deleteDocument').hide();
    $('#tblFiles .deleteDocument').hide();
    $(document).find('#tblFiles .deleteDocument').hide();
    $('.deleteDocument').hide();
}

Answer 1

I am going go on just a bunch of guesses here as the code presented is not truly able to reproduce the issue nor do I have the full rendered HTML.

Assumption is that the HTML as rendered does indeed match the form and templates; given what we have available this should work by fixing the jQuery related JavaScript here only:

$(function() {
    $("#divFileButtons").hide();
    $('.deleteDocument').hide();
});//the fix to the malformed code

Assumptions made:

• the element exists
• whatever code that uses the template to render the button has executed already at this point

Alternative might be to put a custom event handler in place and trigger it once all the template code HAS executed.

Example for that: put in a custom event handler.

$('.fileupload').on('custom-hide',function(event){
    $("#divFileButtons").hide();
    $('.deleteDocument').hide();
});

Now somewhere after the rendering via the template code has executed:

$('.fileupload').trigger('custom-hide');