My alerts are dynamically created.

Is it possible to assign a function to the alert to self destroy in 3 seconds?

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">  
            <a class="close" data-dismiss="alert">×</a>
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

I am using Django as a backend.

The end product looks like this

<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
</div>

Summary

Is it possible to make a timeout function like

setTimeout(function(this){ $(this).remove() }, 3000);

into the tags?

My alerts are dynamically created.

Is it possible to assign a function to the alert to self destroy in 3 seconds?

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">  
            <a class="close" data-dismiss="alert">×</a>
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

I am using Django as a backend.

The end product looks like this

<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
</div>

Summary

Is it possible to make a timeout function like

setTimeout(function(this){ $(this).remove() }, 3000);

into the tags?

• javascript
• jquery
• django

Share Improve this question Follow edited Sep 11, 2018 at 7:25 Travis J 82.4k4242 gold badges212212 silver badges279279 bronze badges asked Sep 11, 2018 at 7:15 ThunderHornThunderHorn 2,03522 gold badges2323 silver badges4343 bronze badges 2

• what you can do is once you appended the html to the div after that call a JavaScript function which will remove the content of that div after 3 seconds. you can use setTimeout – Kaushik Commented Sep 11, 2018 at 7:21
• Yeah but is it possible instead assigning it to go like <div class="alert alert-success" onCreate=setTimeout(function(this){ $(this).remove() }, 3000)> – ThunderHorn Commented Sep 11, 2018 at 7:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

An easy, albeit not the most elegant, way would to simply include a small image element with a script that ran once rendered. The fake source attribute causes the onerror JavaScript to execute immediately. The style causes the image element to not interrupt or alter the way the page renders.

This approach is easier because it doesn't require you to figure out which element needed to be targeted using some sort of data or iterator or custom identifier. It is slightly hard to read, but it does work. The timeout is set for 500 just so you don't have to wait 3 seconds to test it.

<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
    <img src="close.soon" style="display:none;" onerror="(function(el){ setTimeout(function(){ el.parentNode.parentNode.removeChild(el.parentNode); },500 ); })(this);" />
</div>

Alternatively, since you have included jQuery, you could also use this snippet as well:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
    <img src="close.soon" style="display:none;" onerror="(function(el){ setTimeout(function(){ $(el).parent().remove(); },500 ); })(this);" />
</div>

Adding the keyword "modal" to the class list of alert div removes it from the DOM.

So below is one of the approach. Give an ID selector then add the 'modal' to the class list

`<div id='myAlert' class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
My message
</div>`


setTimeout(()=>{
var alertId = document.getElementById('myAlert')
alertId.classList.add('modal')
},3000);