CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user3770114
user3770114

Reputation:

remove previos alert message

Im using the following code to add message and its working fine,the problem is that when I put the second message I see it on top of the preivos message and so on... there is a way to remove the previos message from the UI when I add new one

function addInfoMessage(message) {

    var $msg = $("<div class='alert alert-info'><strong>Information : </strong>" + message + "<button type='button' class='close' aria-hidden='true'>&times;</button></div>");
    $messages.append($msg);

}

Upvotes: 0

Views: 101

Answers (4)

Balachandran
Balachandran

Reputation: 9637

Use in empty() in jQuery to remove all children element

 $messages.empty();
 var $msg = $("<div class='alert alert-info'><strong>Information : </strong>" + message + "<button type='button' class='close' aria-hidden='true'>&times;</button></div>");
    $messages.append($msg);

Upvotes: 2

epascarello
epascarello

Reputation: 207511

Do not append, just replace the content with html()

$messages.html($msg);

Upvotes: 4

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use .html() instead of .append(), this will replace all html code inside $messages

function addInfoMessage(message) {

    var $msg = $("<div class='alert alert-info'><strong>Information : </strong>" + message + "<button type='button' class='close' aria-hidden='true'>&times;</button></div>");
    $messages.html($msg);

}

Upvotes: 2

Ferdi265
Ferdi265

Reputation: 2969

you have to select the message and remove it, like this:

function addInfoMessage(message) {
    $messages.find('.alert.alert-info').remove();
    var $msg = $("<div class='alert alert-info'><strong>Information : </strong>" + message + "<button type='button' class='close' aria-hidden='true'>&times;</button></div>");
    $messages.append($msg);
}

Upvotes: 2

Related Questions