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

Question

Existe-t-il des fonctions telles que: document.getElementById("FirstDiv").clear() ?

Answer 1

Pour répondre à la question d'origine: il y a différentes façons de le faire, mais la suite serait le plus simple.

Si vous disposez déjà d'une poignée à l'enfant du nœud que vous souhaitez supprimer, c'est à dire que vous avez une variable JavaScript qui contient une référence à ça:

myChildNode.parentNode.removeChild(myChildNode);

Évidemment, si vous n'êtes pas en utilisant l'une des nombreuses bibliothèques qui ont déjà ce faire, il vous faudra créer une fonction pour résumé cela:

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

---

EDIT: Comme il a été mentionné par d'autres: si vous avez des gestionnaires d'événement programmé pour le nœud à supprimer, vous voulez vous assurer que vous vous déconnectez à ceux d'avant la dernière référence pour le nœud supprimé sort de la portée, de peur de mauvaises implémentations de l'interpréteur JavaScript de fuite de mémoire.

Answer 2

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

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

Answer 3

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

Answer 4

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

Références:

L'attribut est Égal à Sélecteur [nom=valeur]

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

Sélecteur d'enfant (parent "> enfant")

Sélectionne tous les éléments enfants spécifié par "l'enfant" des éléments spécifié par "parent"

.remove()

Similaire à .empty(), l' .remove() méthode prend éléments du DOM. Nous utilisons .remove() quand nous voulons supprimer l'élément lui-même, ainsi que tout à l'intérieur d'elle. En plus les éléments eux-mêmes, tous liés les événements et les données associées à jQuery les éléments sont supprimés.

Answer 5

//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.