Comment supprimer un élément HTML à l'aide de JavaScript?
La manière la plus atomique de retirer un élément de la page Web HTML est d'utiliser la Suppor () sur cet élément. Pour appliquer une méthode à un élément HTML, l'utilisateur doit créer une référence à cet élément à l'intérieur du code JavaScript.
Cet article montrera comment supprimer un élément d'un document HTML à l'aide d'un exemple.
La méthode retirer ()
La méthode de suppression (comme mentionné ci-dessus) est utilisée pour supprimer un élément sur lequel il est appliqué du document HTML. La syntaxe de la méthode de suppression est la suivante:
elemref.retirer()Dans cette syntaxe, l'ElemRef est la référence de l'élément HTML à l'intérieur du code JavaScript. Cette fonction ne prend aucun paramètre, ni ne renvoie rien. Jetons un coup d'œil à quelques exemples
Exemple1: Suppression d'un élément en utilisant sa classe
Commencez par créer un nouveau fichier HTML et placez les lignes suivantes à l'intérieur de ce fichier:
J'ai la classe "Removeme", alors supprimez-moi!
Par Linuxhint
Dans ces lignes, une étiquette simple est créée avec la classe définie pour "me retirer". L'exécution de ce document HTML affiche la sortie suivante sur le terminal:
La sortie montre le
Tag sur l'écran. Le est juste un espace réservé pour que la page Web ne soit pas vide lorsque l'élément est supprimé. Après cela, ajoutez simplement un bouton qui supprimera l'élément sur le bouton Appuyez sur le bouton et définissez sa valeur onClick sur ButtonClicked ():
Cela nous donne la page Web suivante:
Le bouton est ajouté à la page Web, maintenant dans la balise Ajouter les lignes suivantes:
fonction boutonClicked ()elem = document.getElementsByClassName ("Removeme");
elem.retirer();
Dans les lignes ci-dessus:
- La fonction ButtonClicked () est créée, qui sera exécutée lors de la suppression du bouton Supprimer
- À l'intérieur de la fonction, une référence à l'élément à supprimer est créée en utilisant son nom de classe
- Après cela, la méthode supprimée () est appelée sur l'élément pour le supprimer du document HTML
Exécutez le code maintenant pour obtenir les résultats suivants:
Dès que le bouton est enfoncé, l'élément avec le ClassName = «Removeme» est supprimé du document HTML.
Exemple 2: Suppression d'un élément en utilisant son identifiant
Créez un document HTML, et comme dans l'exemple 1, créez une balise P et un bouton, mais cette fois-ci, donnez le
Marquez un ID au lieu de la classe:
Cette fois, j'ai l'ID comme "Removeme", alors supprimez-moi!
Par Linuxhint
Cela donnera la sortie suivante sur le navigateur:
Après cela, dans le fichier de script, ajoutez les lignes suivantes:
fonction boutonClicked ()elem = document.GetElementsById ("Removeme");
elem.retirer();
Dans les lignes ci-dessus:
- La fonction ButtonClicked () est créée, qui sera exécutée lors de la suppression du bouton Supprimer
- À l'intérieur de la fonction, une référence à l'élément à supprimer est créée en utilisant son id = «Removeme»
- Après cela, la méthode supprimée () est appelée sur l'élément pour le supprimer du document HTML
Exécuter l'élément HTML et en appuyant sur le bouton crée le résultat suivant:
L'élément avec l'ID comme «Removeme» a été supprimé du document HTML
Conclusion
La méthode supprime () peut être appliquée sur un élément pour le supprimer du DOM du document HTML. Cependant, pour appliquer cette méthode à un élément, une référence à l'élément doit d'abord être faite. Et puis, la méthode Suppor () est utilisée sur cette référence de cet élément à l'aide de l'opérateur de points. Cet article a expliqué le fonctionnement de la méthode supprime () avec des exemples.