I have flash message in my Flask app like this:

I want to if I click the close icon the flashed message is closing, or automatically closed in a set of time, eg: in 5 second it automatically closed.

Here is my _flash.html

{% macro render_flashes(class) %}
    {% with msgs = get_flashed_messages(category_filter=[class]) %}
        {% for msg in msgs %}
            <div class="ui {{ class }} message">
                <i class="close icon"></i>
                {{ msg }}
            </div>
        {% endfor %}
    {% endwith %}
{% endmacro %}

<div class="ui text container">
    <div class="flashes">
        {{ render_flashes('error') }}
        {{ render_flashes('warning') }}
        {{ render_flashes('info') }}
        {{ render_flashes('success') }}
    </div>
</div>

So what do I need to improve my code to do that..?

PS: for more information, I using this nicely boilerplate.

I have flash message in my Flask app like this:

I want to if I click the close icon the flashed message is closing, or automatically closed in a set of time, eg: in 5 second it automatically closed.

Here is my _flash.html

{% macro render_flashes(class) %}
    {% with msgs = get_flashed_messages(category_filter=[class]) %}
        {% for msg in msgs %}
            <div class="ui {{ class }} message">
                <i class="close icon"></i>
                {{ msg }}
            </div>
        {% endfor %}
    {% endwith %}
{% endmacro %}

<div class="ui text container">
    <div class="flashes">
        {{ render_flashes('error') }}
        {{ render_flashes('warning') }}
        {{ render_flashes('info') }}
        {{ render_flashes('success') }}
    </div>
</div>

So what do I need to improve my code to do that..?

PS: for more information, I using this nicely boilerplate.

• javascript
• html

1 Answer 1

You can do this with jQuery. Add an onclick function to the button like so:

<i class="close icon" onclick=delete_flash(this)></i>

And here's the code to delete:

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    function delete_flash(flash){
        $(flash).parent().remove()
    }
</script>