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

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?

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

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.

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.

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/

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('');
        }
    }
 );

La meilleure façon est:

 $( ".masterdiv" ).empty();

$("#masterdiv div").text("");

$("#masterdiv > *").text("")

ou

$("#masterdiv").children().text("")

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

ou

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

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

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/

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();

$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

ou

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

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 = '';

essayez-les si cela peut vous aider.

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

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