remove div only on one page in Django template-CodePudding

I have a website that contains 15 seperate pages. On each page I have a div named header. Right know I am removing this element via JavaScript like this:

homepage.html

<script>
    const element = document.getElementById('header');
    element.remove();
</script>

The problem is that I can see the header element for a second before it is removed. The script is placed on the top of the page. I also tried to do it via css like this:

.header {
    height: 0rem !important;
    visibility: hidden !important;
}

However, I still see the element disappearing when refreshing the page.

I know that I could create a template block in my base.html file and just exclude it in the homepage.html page but I'd need to include it in the other 14 HTML files manually.

Question Is there any other/better way to exclude div so I don't see it at all on my homepage?

CodePudding user response：

with css

.header {
    display:none;
}

CodePudding user response：

Django's templating system gives you a vast flexibility to manipulate any content on any view once you understand how its {% block %} tag works, especially in relation to extended (child) templates.

In your case, what you can do is to wrap your header html in base.html like so:

{% block my_header %}
<div ></div>
{% endblock header %}

Now, in the homepage.html you simply add this (assuming it extends base.html):

{% extends "base.html" %}
...
{% block my_header %}{% endblock header %}

With this piece of code you're telling Django to overwrite header block with nothing. I also recommend reading upon {{ block.super }}.