如何修改toggleDeleteAllBtn函数，确保按钮垃圾桶图标始终显示？

原代码的问题在于使用text()方法更新按钮内容时，会清空按钮内的所有子元素（包括垃圾桶图标<i>），导致图标消失。以下是两种可行的修改方案：

方案一：使用html()方法拼接图标与文本 #

直接通过html()方法将图标和新文本一起设置为按钮的innerHTML，确保图标始终存在：

function toggledDeleteAllBtn(){
    // 提前获取选中数量，避免重复DOM查询
    const checkedCount = $('.customer_checkbox:checked').length;
    const trashIcon = '<i class="glyphicon glyphicon-trash" id="trash_icon"></i>';
    
    if(checkedCount > 0){
        $('#sel_button').html(`${trashIcon} Delete all selected(${checkedCount})`);
    }else{
        $('#sel_button').html(`${trashIcon} Delete all selected`);
    }
}

方案二：拆分图标与文本节点（更优） #

先修改HTML，把按钮内的文本单独放在一个<span>容器中，后续只更新这个<span>的内容，完全不影响图标：

修改后的HTML #

<tr id="sid">
    <th>ID</th>
    <th>phone number</th>
    <th>remarks</th>
    <th>date</th>
    <th></th>
    <th><input type="checkbox" name="main-checkbox"></th>
    <th>
        <button class="btn btn-danger btn-sm" id="sel_button" name="sel_button" >
            <i class="glyphicon glyphicon-trash" id="trash_icon"></i>
            <span id="btn_text">Delete all selected</span>
        </button>
    </th>
</tr>

修改后的JavaScript #

function toggledDeleteAllBtn(){
    const checkedCount = $('.customer_checkbox:checked').length;
    
    if(checkedCount > 0){
        $('#btn_text').text(`Delete all selected(${checkedCount})`);
    }else{
        $('#btn_text').text('Delete all selected');
    }
}

这种方式的优势是只更新文本节点，不会重复渲染图标元素，性能更优，后期维护也更方便。

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