1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptのDOMで要素を削除する

2022-04-10 22:43:24

質問

DOM要素が存在するかどうかをテストし、存在する場合はそれを削除し、存在しない場合はそれを作成しようとしているのです。

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

存在するかどうかのチェックはうまくいき、要素の作成もうまくいきますが、要素の削除はうまくいきません。基本的にこのコードが行うことは、ボタンをクリックすることでウェブページにiframeを注入することだけです。私が起こしたいことは、iframeがすでにそこにある場合、それを削除することです。しかし、何らかの理由で私は失敗しています。

どうすればいいですか?

removeChild は親に対して呼び出される必要がある,つまり

parent.removeChild(child);

あなたの例では、次のようなことをしているはずです。

if (frameid) {
    frameid.parentNode.removeChild(frameid);
}