Bootstrap Modal弹窗内最后一张卡片移除后自动关闭方法

核心逻辑 #

每次点击卡片的Done/Skip按钮移除当前卡片后，检测弹窗内剩余卡片数量，当剩余数量为0时，直接调用Bootstrap内置的弹窗关闭方法即可。

具体修改 #

你原有代码仅实现了单卡片移除，缺少移除后的数量判断和关弹窗逻辑，只需要替换原有<script>标签内的JS代码即可，HTML和样式部分不需要改动：

$(document).ready(function(){
    $('.clscurrent').on('click', function() {
        // 定位当前按钮所属的弹窗
        const $targetModal = $(this).closest('.modal');
        // 移除当前卡片
        $(this).closest('.removeit').remove();
        // 统计弹窗内容区剩余的卡片总数
        const leftCardNum = $targetModal.find('.modal-body .removeit').length;
        // 无剩余卡片时关闭弹窗
        if (leftCardNum === 0) {
            $targetModal.modal('hide');
        }
    });
});

逻辑说明 #

• 没有硬编码弹窗ID选择器，通过按钮向上DOM查找所属弹窗，后续同页面新增同类弹窗时这段逻辑可以直接复用，不需要重复修改
• 判断逻辑放在卡片移除操作之后执行，完全匹配「移除最后一张卡片后自动关窗」的交互要求，不会出现提前关窗的问题
• 直接调用Bootstrap 4原生的modal('hide')方法关窗，和你现有代码里的关闭按钮、右上角叉号的关闭逻辑完全一致，不会出现样式或交互异常

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