Django开发中如何移除指定元素CSS样式解决空表格样式残留问题

问题根因 #

你当前仅清空了表头元素的内部内容，但<table>、<th>等DOM节点本身仍存在于页面中，节点绑定的class对应的CSS规则会持续生效，因此出现样式残留问题。

最优解决方案：Django模板层直接判断（无需JS） #

直接在模板层判断内容是否存在，为空时完全不渲染整个表格，从根源避免样式残留。该方案无需前端执行逻辑，不会出现表格短暂显示再消失的闪现问题，性能最优：

{% if post.additional_info != '' %}
<table class="post-table" id="table-example">
    <tr>
        <th class="table-header" colspan="1" id="tab_header">
            <h3>ADDITIONAL INFO</h3>
        </th>
    </tr>
    <tbody id="tab_body">
        <tr>
            <td id="test">{{ post.additional_info }}</td>
        </tr>
    </tbody>
</table>
{% endif %}

备选方案：前端JS处理 #

如果需要保留前端判断逻辑，有两种处理方式可选：

方式1：直接移除整个表格元素 #

为空时直接把表格节点从DOM中删除，完全清除所有关联样式：

var tbl = document.getElementById("table-example");
if (tbl.rows.length == 1) {
    tbl.remove(); // 直接移除整个表格节点
}

方式2：清空元素所有样式 #

如果需要保留表格节点，仅清除样式，可以执行以下操作：

var tbl = document.getElementById("table-example");
var tabHeader = document.getElementById("tab_header");
if (tbl.rows.length == 1) {
    // 移除所有class绑定
    tbl.removeAttribute('class');
    tabHeader.removeAttribute('class');
    // 清空行内样式
    tbl.removeAttribute('style');
    tabHeader.removeAttribute('style');
    // 也可以直接设置隐藏，实现更简单
    tbl.style.display = 'none';
}

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