Remove css class of element

(Django) I have a table that I am attempting to hide if it is empty. I have mostly achieved this the only issue is that the CSS styling is still present after “removing” the table.

How do I remove all of the CSS styling for a particular element?

code:

<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">
        {% if post.additional_info != '' %}
        <tr>
            <td id="test">{{ post.additional_info }}</td>
        </tr>
        {% endif %}
    </tbody>
</table>

<script>
    var tbl = document.getElementById("table-example");
    if (tbl.rows.length == 1) {
        console.log("IT WORKED");
        tab_header = document.getElementById("tab_header").innerHTML = "";
    }
    console.log(tbl.rows.length);
</script>

Answer

You can hide whole table, if is empty:

let table = document.querySelector('.table-example');
table.style.display = 'none';

Advertisement

Answer