Comment effacer tout le contenu de <div> à l'intérieur d'un <div> parent?

219

J'ai une div <div id="masterdiv">qui a plusieurs enfants <div>.

Exemple:

<div id="masterdiv">
  <div id="childdiv1" />
  <div id="childdiv2" />
  <div id="childdiv3" />
</div>

Comment effacer le contenu de tous les enfants <div>à l'intérieur du maître à l' <div>aide de jQuery?

Prasad
la source
6
J'ai ré-étiqueté votre question car elle n'est pas liée à Asp.net MVC (comme vous l'avez étiquetée) de quelque manière que ce soit.
Robert Koritnik
Envisagez d'accepter une réponse qui utilise .empty(). C'est la façon la plus performante de le faire
Kolob Canyon

Réponses:

270
jQuery('#masterdiv div').html('');
Quentin
la source
Pouvons-nous cloner le html et manipuler à ce sujet? comme var tmp = $ ('<div>') .append ($ ('# masterdiv'). clone ()). remove (). html (); et obtenir les divs à l'intérieur de #masterdiv de tmp et effacer le contenu et revenir
Prasad
118
L'utilisation .empty()serait une meilleure option car aucune analyse de chaîne n'est impliquée. Il opère directement sur le modèle objet DOM.
Drew Noakes
7
empty()efface également tout le contenu généré avec jQuery.
MikkoP
445

La empty()fonction de jQuery fait exactement cela:

$('#masterdiv').empty();

efface le maître div.

$('#masterdiv div').empty();

efface tous les enfants div, mais laisse le maître intact.

Emil Ivanov
la source
8
api.jquery.com/empty c'est vrai mais je ne sais pas pourquoi la réponse de Quentin a accepté :)
Nuri YILMAZ
5
Cela efface plus que ce qui était demandé dans la question d'origine - vous devez utiliser un sélecteur plus spécifique .
Drew Noakes
4
Wow, merci Drew de l'avoir souligné 1,5 an plus tard :) Corrigé.
Emil Ivanov
20

Utilisez la syntaxe de sélecteur CSS de jQuery pour sélectionner tous les divéléments à l'intérieur de l'élément avec id masterdiv. Appelez ensuite empty()pour effacer le contenu.

$('#masterdiv div').empty();

L'utilisation de text('')ou html('')entraînera une analyse syntaxique des chaînes, ce qui est généralement une mauvaise idée lorsque vous travaillez avec le DOM. Essayez et utilisez des méthodes de manipulation DOM qui n'impliquent pas de représentations de chaîne d'objets DOM dans la mesure du possible.

Drew Noakes
la source
14

jQuery vous recommande d'utiliser ".empty ()", ". remove ()", ". detach ()"

si vous avez besoin de supprimer tous les éléments de l'élément, utilisez ce code:

$('#target_id').empty();

si vous avez besoin de supprimer tous les éléments, utilisez ce code:

$('#target_id').remove();

i et le groupe jQuery ne recommandent pas d'utiliser SET FUNCTION comme .html () .attr () .text (), qu'est-ce que c'est? c'est SI VOUS VOULEZ RÉGLER TOUT CE DONT VOUS AVEZ BESOIN

réf: https://learn.jquery.com/using-jquery-core/manipulating-elements/

Abdul Aziz Al Basyir
la source
12

Si toutes les div à l'intérieur de ce masterdiv doivent être effacées, c'est cela.

$('#masterdiv div').html('');

sinon, vous devez itérer sur tous les enfants div de #masterdiv et vérifier si l'id commence par childdiv.

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );
Ikke
la source
11

La meilleure façon est:

 $( ".masterdiv" ).empty();
Joe Mike
la source
1
Cela sélectionne tous les éléments avec la classe "masterdiv", pas l'id "masterdiv", selon les questions - juste une note.
Dave
7
$("#masterdiv div").text("");
brendan
la source
6
$("#masterdiv > *").text("")

ou

$("#masterdiv").children().text("")
admirer
la source
6
$('#div_id').empty();

ou

$('.div_class').empty();

Fonctionne bien pour supprimer le contenu à l'intérieur d'un div

Raki
la source
3
Duplicata de la réponse d'Emil Ivanov.
Adrian Enriquez
6

Vous pouvez utiliser la fonction .empty () pour effacer tous les éléments enfants

 $(document).ready(function () {
  $("#button").click(function () {
   //only the content inside of the element will be deleted
   $("#masterdiv").empty();
  });
 });

Pour voir la comparaison entre jquery .empty (), .hide (), .remove () et .detach () suivez ici http://www.voidtricks.com/jquery-empty-hide-remove-detach/

Anand Roshan
la source
5

Lorsque vous ajoutez des données dans div par id à l'aide de n'importe quel service ou base de données, essayez d'abord de les vider, comme ceci:

var json = jsonParse(data.d);
$('#divname').empty();
Sheeraz
la source
4
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

ou

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
andres descalzo
la source
3

Je sais que c'est une jQueryquestion connexe, mais je pense que quelqu'un pourrait s'attendre à une Javascriptsolution pure . Donc, si vous essayez de le faire en utilisant js, vous pouvez utiliser la innerHTMLpropriété et la définir sur une chaîne vide.

document.getElementById('masterdiv').innerHTML = '';
Alain Cruz
la source
1
c'était le meilleur résultat sur Google lors de la recherche de la façon de vider une div. Je vous remercie!
Prid
0

essayez-les si cela peut vous aider.

$('.div_parent .div_child').empty();

$('#div_parent #div_child').empty();

Gaurav Kaushik
la source
pourquoi "-1". J'essayais seulement d'aider?
Gaurav Kaushik