JavaScript에서 DOM 요소를 올바르게 제거하는 방법은 무엇입니까?

JavaScript DOM - 요소 제거

JavaScript에서는 DOM(문서 개체 모델) 작업 시 요소를 제거하는 것이 일반적인 작업입니다. 기존 요소를 DOM에서 제거해야 하는 경우에는 RemoveChild 메소드가 사용됩니다.

일반적인 시나리오 중 하나는 요소의 존재 여부를 테스트한 후 해당 요소가 있으면 삭제하거나 없으면 생성하는 것입니다. 이 접근 방식을 사용하면 요소가 아직 존재하지 않는 경우에만 생성됩니다.

다음 코드를 고려하세요.

<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>

이 코드에서 iframe의 존재를 확인하고 요소를 생성합니다. 없으면 의도한 대로 작동합니다. 그러나 iframe.removeChild(frameid.childNodes[0])를 사용하여 iframe을 제거하려는 시도는 실패합니다.

오류는 iframe.removeChild 사용에 있습니다. RemoveChild 메소드는 제거되는 요소의 상위에서 호출되어야 합니다. 이 경우, Frameid의 부모는 body 요소입니다. 따라서 올바른 제거 방법은 다음과 같습니다.

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

위 내용은 JavaScript에서 DOM 요소를 올바르게 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!