JavaScript를 사용하여 HTML에서 하위 노드를 제거하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com/questions/13763

  •  08-06-2019
  •  | 
  •  

문제

같은 기능이 있나요 document.getElementById("FirstDiv").clear()?

도움이 되었습니까?

해결책

원래 질문에 답하려면 다양한 방법이 있지만 다음 방법이 가장 간단합니다.

제거하려는 하위 노드에 대한 핸들이 이미 있는 경우, 즉이에 대한 참조를 보유하는 JavaScript 변수가 있습니다.

myChildNode.parentNode.removeChild(myChildNode);

분명히, 이미 이 작업을 수행하는 수많은 라이브러리 중 하나를 사용하지 않는 경우 이를 추상화하는 함수를 생성하고 싶을 것입니다.

function removeElement(node) {
    node.parentNode.removeChild(node);
}

편집하다:다른 사람들이 언급한 바와 같이:제거하려는 노드에 연결된 이벤트 핸들러가 있는 경우 제거 중인 노드에 대한 마지막 참조가 범위를 벗어나기 전에 해당 이벤트 핸들러의 연결을 끊었는지 확인하여 JavaScript 해석기 메모리 누출 구현이 잘못되지 않도록 해야 합니다.

다른 팁

div를 지우고 모든 하위 노드를 제거하려면 다음을 입력할 수 있습니다.

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

targetNode.remove()

이는 2015년 후반부터 W3C에서 권장하는 사항이며 바닐라 JS.이전 방법보다 훨씬 더 좋고 깨끗합니다.

귀하의 사용 사례에 대해:

document.getElementById("FirstDiv").remove();

이전 버전과의 호환성을 보장하기 위해 폴리필이 필요한 경우:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

모질라 문서

지원되는 브라우저 - 92% 2018년 3월

IE에서 메모리 누수를 방지하려면 노드를 제거하기 전에 노드에 설정한 모든 이벤트 핸들러를 제거해야 합니다.

jQuery 솔루션

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

자바스크립트

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

참고자료:

속성이 선택기 [이름=값]과 같음

특정 값과 정확히 같은 값을 가진 지정된 속성을 가진 요소를 선택합니다.

하위 선택기("상위 > 하위")

"부모"로 지정된 요소의 "자식"으로 지정된 모든 직접 아동 요소를 선택합니다.

.제거하다()

.empty ()와 유사하게 .remove () 메소드는 DOM에서 요소를 가져옵니다.우리는 요소 자체와 내부의 모든 것을 제거하려면 .remove ()를 사용합니다.요소 자체 외에도 요소와 관련된 모든 바운드 이벤트 및 JQuery 데이터가 제거됩니다.

다음 코드를 사용하세요.

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p는 부모 노드이고 c는 자식 노드입니다.
parentNode는 상위 참조를 포함하는 JavaScript 변수입니다.

이해하기 쉬운

노드의 .RemoveNode 메서드 또는 상위 노드의 .RemoveChild 메서드를 사용할 수 있어야 합니다.

이와 같은 작업을 수행하려면 JavaScript 라이브러리를 사용해야 할 것입니다.

예를 들어 MochiKit에는 다음과 같은 기능이 있습니다. 제거요소, 그리고 jQuery는 제거하다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top