Ajout d'un message d'erreur, vous voulez effacer la div première

Question

Mon HTML ressemble et js ressemble à ceci:

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

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

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

Le problème est que je ne désactivent pas le html dans la div class = premier récipient, donc je continue d'ajouter des messages à cette zone.

Comment est-ce que je peux d'abord effacer quelque chose à l'intérieur du div class = "container" et ALORS ajouter mon div "html"?

Answer 1

En supposant que vous voulez dire à « remplacer » ce qui est dans votre div, je pense que ce que vous devez utiliser est:

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

Une façon de faire plus jQueryish ce serait:

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

Cela a l'avantage supplémentaire de vous donner une référence à l'erreur div.

Answer 2

Vous pouvez appeler

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

avant le nouvel élément ajoutez div.

Référence: http://docs.jquery.com/Manipulation/empty

Answer 3

Je prends la liberté de supposer que vous utilisez le conteneur pour les messages d'état, puis créer des messages d'erreur/succès à la volée pour aller à l'intérieur du conteneur div. Si oui, je vous suggère d'aller avec l'approche suivante à la place:

Html:

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

Javascript:

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

Notez les points suivants:

• Comme Paolo mentionne dans son commentaire, il est beaucoup plus efficace de référencer le <div> par un id - qui va directement sur le e javascript document.getElementById() méthode, qui est bien plus rapide que parcourir l'arbre DOM entier à la recherche d'un élément ...
• Comme vous effaciez le contenu du <div class="container"> pour chaque appel, je n'ai vu aucune raison de le garder. Vous pouvez aussi bien manipuler le contenu html et les classes css d'un seul div. Plus vite, et plus joli dans votre balisage =)
• Vous n'avez évidemment pas besoin de votre logique d'affichage/de message d'erreur dans des méthodes séparées - je l'ai fait uniquement par souci de clarté.

Answer 4

Voilà comment je suis allé à ce sujet

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

Answer 5

Oui, vous avez raison. Je voulais dire que pour la méthode append.

donc:

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