使用jQuery无法隐藏Blueimp FileUpload表格中所有行的删除按钮

你的问题核心在于：$(document).ready执行时，template-download模板里的删除按钮还没被动态渲染到DOM中，所以你写的那些jQuery选择器根本找不到对应的元素，自然没法隐藏它们。

Blueimp jQuery FileUpload会异步加载已上传的文件，然后通过template-download模板动态生成DOM元素，这个过程是在document.ready之后完成的，所以你提前执行的隐藏代码无效。

解决方法 #

方法一：利用FileUpload的官方回调事件

框架提供了专门的事件钩子，在文件渲染完成后触发，你可以在这个时机执行隐藏操作：

$(document).ready(function() {
    // 隐藏添加文件按钮（已生效的代码保留）
    $('.fileupload').find("#divFileButtons").hide();

    // 监听文件加载/上传完成事件，此时已上传文件的DOM已生成
    $('.fileupload').on('fileuploaddone', function() {
        $('#tblFiles .deleteDocument').hide();
    });

    // 针对页面初始化时就存在的历史文件，补充监听初始化完成事件
    $('.fileupload').on('fileuploadinit', function() {
        // 加个短延迟确保模板渲染完成
        setTimeout(() => $('#tblFiles .deleteDocument').hide(), 100);
    });
});

方法二：直接修改模板（最简单）

如果不需要动态控制显示/隐藏，直接在template-download模板里给删除按钮加上隐藏样式，渲染出来就直接看不到：

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <!-- 其他代码不变 -->
        <td>
            <!-- 新增style="display:none;" -->
            <button class="deleteDocument" style="display:none;" 
                    data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}">
                删除
            </button>
        </td>
        <!-- 其他代码不变 -->
    </tr>
{% } %}
</script>

方法三：监听DOM变化（通用方案）

如果以上两种方法不适用，可以用MutationObserver监听表格的DOM变化，当删除按钮被添加时自动隐藏：

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

    // 创建DOM变化监听器
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            // 当有新节点添加时，隐藏删除按钮
            if (mutation.addedNodes.length) {
                $('#tblFiles .deleteDocument').hide();
            }
        });
    });

    // 监听文件表格的子节点变化
    observer.observe(document.getElementById('tblFiles'), {
        childList: true,
        subtree: true
    });
});

推荐方案 #

优先选方法一，这是框架设计时提供的标准钩子，兼容性和可靠性最好；如果只是固定隐藏，方法二最省事。

内容的提问来源于stack exchange，提问作者TheFallenOne