When adding an error message, you must first clear the div

Question

My HTML looks like this and js looks like this:

<div class="container"></div>

var html = "<div class="error">hello</div>";

$(".container").append( $(html) );

The problem is that I do not clear the html inside the div with class = container at first, so I keep adding posts to this area.

How can I clear the entire contents of a container div class = "and THEN add my 'html' div?

Answer 1

Assuming you want to “replace” with what's in your div, I think you need to use:

$(".container").html( html );

More jQueryish way to do this:

$errorDiv = $('<div>hello</div>').addClass('error');
$(".container").html($errorDiv.html());

This has the added benefit of giving you a link to a div error.

Answer 2

You may call

$(".container").empty();

before adding a new div element.

: http://docs.jquery.com/Manipulation/empty

Answer 3

, , / " ", div. , :

Html:

<div id="status"></div>

JavaScript:

function showError(msg) {
    $('#status').html(msg).addClass('error');
}
function showStatus(msg) {
    $('#status').html(msg).removeClass('error');
}

:

• , <div> id -, javascript document.getElementById(), , DOM ...
• <div class="container"> , . html css div. =)
• You obviously do not need the message status / error message logic in separate methods - I did this just for clarity.

Answer 4

this is how i did it

$(document).ready(function() {
        $('.err').click(function() {
            $('.err').empty().text('Massive Error has occured. ooof!!!');
        });
    });

Answer 5

Yes you are right. I wanted to say that for the append method.

So:

$(".container").empty().append(htmlOfyourerror);