Comment faire pour vider le contenu d'un div

Ce que quelqu'un sait comment faire pour vider le contenu d'un div (sans la détruire) en JavaScript?

Merci,

Bruno

InformationsquelleAutor Bruno | 2011-04-21
  1. 56

    Si votre div ressemble à ceci:

    <div id="MyDiv">content in here</div>

    Puis ce Javascript:

    document.getElementById("MyDiv").innerHTML = "";

    va faire ressembler à ceci:

    <div id="MyDiv"></div>

    • A très bien fonctionné. Cette enlevés, JS(une carte OpenLayers dans mon cas) à partir de la div, tandis que $('#example').empty(); ne pas supprimer JS.
    • Qui le détruit.
    InformationsquelleAutor Zach Rattner
  2. 8

    Si vous êtes à l'aide de jQuery ...

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

    ou 

    $('div').empty();
    • Il a demandé en javascript jquery.
    InformationsquelleAutor ezmilhouse
  3. 5

    Une autre façon de le faire est:

    var div = document.getElementById('myDiv');
while(div.firstChild)
    div.removeChild(div.firstChild);

    Cependant, l'utilisation de document.getElementById('myDiv').innerHTML = ""; est plus rapide.

    Voir: Le test de référence

    N. B.

    Les deux méthodes de préserver la div.

    • Suis-je une erreur de lecture qui test? Pour tous les navigateurs, le premier moyen est plus élevé ops/sec ce qui signifie que ses plus rapidement. La deuxième façon est plus lente et plus complexe.
    • Non, vous avez raison. J'ai mal lu, que. Je me suis trompé d'opérations par seconde, pour un total de temps. Je vais mettre à jour ma réponse.
    InformationsquelleAutor Dan Bray
  4. 4

    Si en disant sans la détruire, tu veux dire pour conserver une référence pour les enfants, vous pouvez faire:

    var oldChildren = [];

while(element.hasChildNodes()) {
    oldChildren.push(element.removeChild(element.firstChild));
}

    Quant à l'origine de marquage (html css) de votre question:

    Vous ne pouvez pas supprimer le contenu avec les CSS. Vous ne pouvait le cacher. E. g. vous pouvez masquer tous les enfants d'un certain nœud avec:

    #someID > * {
    display: none;
}

    Cela ne fonctionne pas avec IE6 bien (mais vous pouvez utiliser #someID *).

    InformationsquelleAutor Felix Kling
  5. 2

    En jQuery, il serait aussi simple que de $('#yourDivID').empty()

    Voir le la documentation.

    • La question d'origine ne fait pas référence à jquery. S'il vous plaît arrêter en supposant que le code javascript de base opérations requièrent une sorte de bibliothèque externe pour chaque tâche simple.
    • oh boy, est-ce nécessaire 5 ans plus tard, après la réponse? 🙂 jQuery est une sorte de standard en 2011 et pour votre information, il est encore largement utilisé. jQuery javascript est btw. si vous ne saviez pas ...
    • donc, a été document.querySelector("#myDiv").InnerHTML = "";
    • Vous n'avez pas besoin de la surcharge de l'ensemble de jQuery pour faire ça. Aussi, ce qui suggère la meilleure pratique n'est pas soumis à l'expiration.
    • c'est votre opinion. Cette bibliothèque(jQuery) fait des tâches très complexes beaucoup plus simple. Très gros sites de l'utiliser. Alors détendez-vous. C'est trop vous si vous voulez faire les choses à la dure. Personne ne se soucie.
    InformationsquelleAutor Jan Zyka
  6. 1

    Cette méthode qui fonctionne le mieux pour moi:

    Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

    De l'utiliser, nous pouvons déployer comme ceci:

    document.getElementsByID('DIV_Id').remove();

    ou

    document.getElementsByClassName('DIV_Class').remove();
    InformationsquelleAutor Chetabahana
  7. 0

    vous pouvez .remove() chaque enfant:

    const div = document.querySelector('div.my-div')
while(div.firstChild) div.firstChild.remove()
    InformationsquelleAutor Yukulélé