Comment supprimer un élément HTML à l'aide de JavaScript?

Les manipulations JavaScript Dom permettent à un utilisateur de supprimer n'importe quel élément de la page Web HTML à l'aide du retirer() méthode. Cependant, une référence à son nœud est requise en JavaScript pour supprimer un élément. Ce n'est que avec cette référence qu'un élément peut être supprimé de la page Web. Le retirer() La méthode supprime l'élément HTML du modèle d'objet de document de la page Web en prenant l'élément en tant que nœud. Regardons la syntaxe du retirer() Méthode disponible pour tous les éléments de page HTML.

Syntaxe de la méthode supprime ()

La syntaxe de la méthode de suppression est donnée comme

elemrefference.retirer();

De la syntaxe ci-dessus, il est évident que vous n'avez qu'à appliquer le retirer() sur un élément ou sur un nœud pour le supprimer, et aucun paramètre supplémentaire n'est requis.

Exemple: supprimer un élément d'une page Web HTML

Pour démontrer l'utilisation du retirer() Méthode, créez une page Web HTML avec du texte et un bouton en utilisant les lignes de code à l'intérieur de la balise:

Tu veux me supprimer!

Cliquez sur moi pour supprimer

Notez qu'un sur clic() L'attribut a été ajouté avec le bouton qui va rechercher le ButtonClicked () Méthode à l'intérieur du fichier de script. Et le paragraphe à supprimer a l'ID comme «mon texte"

Exécuter la page Web HTML. Vous verrez l'écran suivant sur votre navigateur:

Pour ajouter des fonctionnalités sur le bouton CLIQUEZ, rendez-vous sur le fichier de script et créez le ButtonClicked () Fonction avec les lignes de code suivantes:

fonction boutonClicked ()
// Les lignes à venir doivent être placées à l'intérieur ici

À l'intérieur de cette fonction, la toute première étape consiste à obtenir une référence au paragraphe à supprimer en utilisant le getElementByid () méthode comme

var elem = document.getElementById ("MyText");

La référence a été stockée à l'intérieur du elem variable. Utilisez le retirer() Méthode à ce sujet elem variable à l'aide de l'opérateur DOT

elem.retirer();

L'ensemble de l'extrait de code de script sera comme le suit:

fonction boutonClicked ()
var elem = document.getElementById ("MyText");
elem.retirer();

Exécutez la page Web et cliquez sur le bouton pour supprimer la balise de paragraphe avec l'ID "mon texte»:

Et l'élément a été supprimé de la page Web HTML et du DOM également.

Conclusion

Avec chaque élément HTML, il existe une fonction intégrée qui vient avec ES6 JavaScript qui éradique l'élément de la page Web HTML et du DOM. Cette méthode est nommée retirer() Méthode et est appliquée à l'élément à l'aide d'un opérateur de points. La méthode supprimée () ne nécessite aucun argument et ne renvoie aucune valeur. Cet article a démontré le fonctionnement de la méthode supprime ().