{"id":5694,"date":"2024-08-29T02:52:11","date_gmt":"2024-08-29T02:52:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/supprimer-elements-du-dom-en-javascript-guide\/"},"modified":"2024-08-29T02:52:14","modified_gmt":"2024-08-29T02:52:14","slug":"supprimer-elements-du-dom-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/supprimer-elements-du-dom-en-javascript-guide\/","title":{"rendered":"12.6 Supprimer \u00c9l\u00e9ments du DOM en JavaScript : Guide"},"content":{"rendered":"\n<p><strong>Supprimer des \u00c9l\u00e9ments du DOM en JavaScript<\/strong> est une op\u00e9ration courante et essentielle lors de la manipulation de pages web dynamiques. Savoir comment enlever correctement des \u00e9l\u00e9ments du DOM peut am\u00e9liorer l&rsquo;interactivit\u00e9 et la performance de votre application web. Apprenons diff\u00e9rentes techniques pour supprimer des \u00e9l\u00e9ments, avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Suppression d&rsquo;\u00c9l\u00e9ments du DOM en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658891179?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La suppression d&rsquo;\u00e9l\u00e9ments du DOM (Document Object Model) implique l&rsquo;utilisation de m\u00e9thodes JavaScript qui permettent de manipuler l&rsquo;arborescence des documents HTML. Cette t\u00e2che est essentielle pour les mises \u00e0 jour en temps r\u00e9el de l&rsquo;interface utilisateur, comme le retrait dynamique de notifications, d&rsquo;articles, de messages, etc. Explorons quelques m\u00e9thodes simples et efficaces pour <a href=\"https:\/\/wikiform.fr\/codespace\/supprimer-elements-du-dom-en-javascript-guide\">supprimer des \u00e9l\u00e9ments du DOM en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>removeChild<\/code> pour Supprimer un \u00c9l\u00e9ment<\/h3>\n\n\n\n<p>La m\u00e9thode <code>removeChild<\/code> est l&rsquo;une des m\u00e9thodes les plus couramment utilis\u00e9es pour supprimer un enfant sp\u00e9cifique d&rsquo;un \u00e9l\u00e9ment parent. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    let parent = document.getElementById('parentElement');\n    let child = document.getElementById('childElement');\n    \n    \/\/ Suppression de l'enfant\n    parent.removeChild(child);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>remove<\/code> pour Supprimer un \u00c9l\u00e9ment<\/h3>\n\n\n\n<p>Depuis la norme ECMAScript 2015 (ES6), vous pouvez \u00e9galement utiliser la m\u00e9thode <code>remove<\/code> pour supprimer un \u00e9l\u00e9ment directement sans avoir \u00e0 acc\u00e9der \u00e0 son parent. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    let element = document.getElementById('elementToRemove');\n    \n    \/\/ Suppression de l'\u00e9l\u00e9ment\n    element.remove();\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>innerHTML<\/code> pour Supprimer des Enfants<\/h3>\n\n\n\n<p>Pour supprimer tous les enfants d&rsquo;un \u00e9l\u00e9ment, vous pouvez r\u00e9initialiser son contenu HTML en d\u00e9finissant <code>innerHTML<\/code> sur une cha\u00eene vide. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    let parent = document.getElementById('parentElement');\n    \n    \/\/ Suppression de tous les enfants\n    parent.innerHTML = '';\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Supprimer des \u00c9l\u00e9ments avec des S\u00e9lecteurs Complexes<\/h3>\n\n\n\n<p>Si vous souhaitez supprimer plusieurs \u00e9l\u00e9ments r\u00e9pondant \u00e0 un certain crit\u00e8re, vous pouvez utiliser des s\u00e9lecteurs complexes avec <code>querySelectorAll<\/code> et it\u00e9rer sur la NodeList r\u00e9sultante pour supprimer chaque \u00e9l\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    let elements = document.querySelectorAll('.items-to-remove');\n    \n    elements.forEach(element => {\n        element.remove();\n    });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Suppression avec Confirmation Utilisateur<\/h3>\n\n\n\n<p>Parfois, vous pouvez vouloir demander \u00e0 l&rsquo;utilisateur de confirmer son action avant de supprimer un \u00e9l\u00e9ment. Voici comment utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\">confirm<\/a> pour obtenir cette confirmation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    let button = document.getElementById('deleteButton');\n    \n    button.addEventListener('click', (e) => {\n        if (confirm('\u00cates-vous s\u00fbr de vouloir supprimer cet \u00e9l\u00e9ment ?')) {\n            let element = document.getElementById('elementToDelete');\n            element.remove();\n        }\n    });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Observateurs pour des Suppressions Automatis\u00e9es<\/h3>\n\n\n\n<p>Une approche avanc\u00e9e consiste \u00e0 utiliser <code>MutationObserver<\/code> pour surveiller les changements dans le DOM et supprimer automatiquement les \u00e9l\u00e9ments r\u00e9pondant \u00e0 certains crit\u00e8res. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', (event) => {\n    const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n                if (node.nodeType === 1 && node.classList.contains('auto-remove')) {\n                    node.remove();\n                }\n            });\n        });\n    });\n\n    \/\/ Commence \u00e0 observer le document entier\n    observer.observe(document.body, { childList: true, subtree: true });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s et Applications R\u00e9elles<\/h3>\n\n\n\n<p>Pour approfondir l&rsquo;utilisation de la suppression d&rsquo;\u00e9l\u00e9ments dans des projets r\u00e9els, envisagez des sc\u00e9narios comme la gestion de listes dynamiques, la suppression de contenu contextuel ou l&rsquo;optimisation des performances de l&rsquo;application en d\u00e9sactivant des composants inutilis\u00e9s. Il est souvent utile d&rsquo;utiliser des <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\">boucles en JavaScript<\/a> pour it\u00e9rer sur plusieurs \u00e9l\u00e9ments \u00e0 supprimer.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Suppression d'\u00e9l\u00e9ments de liste dynamique\ndocument.addEventListener('DOMContentLoaded', (event) => {\n    let list = document.getElementById('dynamicList');\n    \n    list.addEventListener('click', (e) => {\n        if (e.target && e.target.matches('button.remove-item')) {\n            let item = e.target.closest('li');\n            if (item) {\n                item.remove();\n            }\n        }\n    });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Compl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour en savoir plus sur la manipulation du DOM et d\u00e9couvrir d&rsquo;autres techniques pour rendre vos applications web plus dynamiques, consultez les ressources suivantes :<\/p>\n\n\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/Document_Object_Model\" target=\"_blank\" rel=\"noopener\">Documentation du DOM sur MDN<\/a><\/li>\n  <li><a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\" target=\"_blank\" rel=\"noopener\">Tutoriels DOM sur W3Schools<\/a><\/li>\n  <li><a href=\"https:\/\/javascript.info\/dom-nodes\" target=\"_blank\" rel=\"noopener\">JavaScript.info section sur le DOM<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\">Placer du code JavaScript : Guide Pratique<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\">Ajouter des \u00e9l\u00e9ments au DOM en JavaScript<\/a><\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Savoir comment <strong>supprimer des \u00e9l\u00e9ments du DOM en JavaScript<\/strong> est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Qu&rsquo;il s&rsquo;agisse de retirer un seul \u00e9l\u00e9ment ou de manipuler des listes compl\u00e8tes, ces techniques offrent la flexibilit\u00e9 n\u00e9cessaire pour g\u00e9rer des interfaces utilisateur modernes et interactives. Pour plus de tutoriels et d&rsquo;articles sur JavaScript et le d\u00e9veloppement web, consultez nos autres ressources et continuez d&rsquo;apprendre pour ma\u00eetriser davantage ce langage puissant.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-fondamentaux-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Supprimer des \u00c9l\u00e9ments du DOM en JavaScript est une op\u00e9ration courante et essentielle lors de la manipulation de pages web dynamiques. Savoir comment enlever correctement&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5694","post","type-post","status-publish","format-standard","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5694"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5694\/revisions"}],"predecessor-version":[{"id":5695,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5694\/revisions\/5695"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}