Comment supprimer correctement les éléments DOM en JavaScript ?

JavaScript DOM - Suppression d'éléments

En JavaScript, lorsque vous travaillez avec le modèle objet de document (DOM), la suppression d'éléments est une tâche courante. Lorsqu'un élément existant doit être supprimé du DOM, la méthode RemoveChild est utilisée.

Un scénario courant consiste à tester l'existence d'un élément et à le supprimer s'il est présent ou à le créer s'il est absent. Cette approche garantit que l'élément n'est créé que s'il n'existe pas déjà.

Considérez le code suivant :

<code class="javascript">var duskdawnkey = localStorage["duskdawnkey"];
var iframe = document.createElement("iframe");
var whereto = document.getElementById("debug");
var frameid = document.getElementById("injected_frame");

iframe.setAttribute("id", "injected_frame");
iframe.setAttribute("src", 'http://google.com');
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "400");

if (frameid) { // check and see if iframe is already on page
  // yes? Remove iframe
  iframe.removeChild(frameid.childNodes[0]);
} else { // no? Inject iframe
  whereto.appendChild(iframe);
  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("debug");
  document.body.insertBefore(iframe, my_div);
}</code>

Dans ce code, vérifier l'existence de l'iframe et créer s'il est absent, il fonctionne comme prévu. Cependant, la tentative de suppression de l'iframe à l'aide de iframe.removeChild(frameid.childNodes[0]) échoue.

L'erreur réside dans l'utilisation de iframe.removeChild. La méthode RemoveChild doit être appelée sur le parent de l'élément en cours de suppression. Dans ce cas, le parent de frameid est l’élément body. Par conséquent, la méthode de suppression correcte est :

<code class="javascript">if (frameid) {
  frameid.parentNode.removeChild(frameid);
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!