Reputation: 494
(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>
Upvotes: 1
Views: 657
Reputation: 23500
You can hide whole table, if is empty:
let table = document.querySelector('.table-example');
table.style.display = 'none';
Upvotes: 1