Comment puis-je supprimer un nœud enfant en HTML à l'aide de JavaScript ?

Question

Existe-t-il une fonction comme document.getElementById("FirstDiv").clear()?

Answer 1

Pour répondre à la question initiale, il existe différentes manières de procéder, mais la suivante serait la plus simple.

Si vous disposez déjà d'un handle vers le nœud enfant que vous souhaitez supprimer, c'est-à-direvous disposez d'une variable JavaScript qui contient une référence :

myChildNode.parentNode.removeChild(myChildNode);

Évidemment, si vous n'utilisez pas l'une des nombreuses bibliothèques qui le font déjà, vous souhaiterez créer une fonction pour extraire cela :

function removeElement(node) {
    node.parentNode.removeChild(node);
}

---

MODIFIER:Comme cela a été mentionné par d'autres :si vous avez des gestionnaires d'événements connectés au nœud que vous supprimez, vous devez vous assurer de les déconnecter avant que la dernière référence au nœud en cours de suppression ne soit hors de portée, de peur que de mauvaises implémentations de l'interpréteur JavaScript ne fuient la mémoire.

Answer 2

Si vous souhaitez effacer le div et supprimer tous les nœuds enfants, vous pouvez mettre :

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Answer 3

targetNode.remove()

Ceci est recommandé par le W3C depuis fin 2015 et est vanille JS.Bien meilleur/plus propre que la méthode précédente.

Pour votre cas d'utilisation :

document.getElementById("FirstDiv").remove();

Si vous avez besoin d'un polyfill pour garantir la compatibilité ascendante :

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Documents Mozilla

Navigateurs pris en charge - 92% mars 2018

Answer 4

Vous devez supprimer tous les gestionnaires d'événements que vous avez définis sur le nœud avant de le supprimer, pour éviter les fuites de mémoire dans IE.

Answer 5

Une solution jQuery

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Javascript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

Les références:

L'attribut est égal au sélecteur [nom=valeur]

Sélectionne les éléments qui ont l'attribut spécifié avec une valeur exactement égale à une certaine valeur.

Sélecteur d'enfant (« parent > enfant »)

Sélectionne tous les éléments enfants directs spécifiés par "enfant" d'éléments spécifiés par "parent"

.retirer()

Semblable à .Empty (), la méthode .Remove () élimine les éléments du dom.Nous utilisons .Remove () lorsque nous voulons retirer l'élément lui-même, ainsi que tout à l'intérieur.En plus des éléments eux-mêmes, tous les événements liés et les données JQuery associés aux éléments sont supprimés.

Answer 6

Utilisez le code suivant :

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

Answer 7

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p est le nœud parent et c est le nœud enfant
parentNode est une variable JavaScript qui contient la référence parent

Facile à comprendre

Answer 8

Vous devriez pouvoir utiliser la méthode .RemoveNode du nœud ou la méthode .RemoveChild du nœud parent.

Answer 9

Vous devriez probablement utiliser une bibliothèque JavaScript pour faire des choses comme celle-ci.

Par exemple, MochiKit a une fonction supprimerÉlément, et jQuery a retirer.