javascript 삭제 부모 요소를 모른 채 DOM 요소를 제거 하시겠습니까?




removechild (6)

body 태그 이외의 부모가없는 dom 요소를 제거 할 수 있습니까? 이 jquery 같은 프레임 워크를 쉽게 될 것이라고 알고 있지만 직선 자바 스크립트 스틱 노력하고있어.

다른 방법으로 찾은 코드는 다음과 같습니다.

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}   

감사!


Answer #1

outerHTML 속성을 사용하여 요소 제거하기

remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function remElement(obj) {
obj.outerHTML="";
}

Answer #2
document.body.removeChild(child);

Answer #3

DOM에서 DOM 요소를 삭제하기 위해 부모를 알아야 할 필요는 없습니다. 아래 코드를 살펴보십시오. 자바 스크립트에서 노드 요소를 삭제하는 방법은 무엇입니까?

Element + parentNode + removeChild(Element);

보시다시피 요소를 먼저 찾은 다음 .parentNode를 사용하고 요소 인 자식을 다시 제거하므로 부모를 전혀 알 필요가 없습니다!

이제 실제 코드를 살펴보십시오.

var navigation = document.getElementById('navigation');
if(navigation) {
  navigation.parentNode.removeChild(navigation);
}

또는 함수로서

function removeNode(element) {
  if(element) { //check if it's not null
    element.parentNode.removeChild(element);
  } 
} //call it like : removeNode(document.getElementById('navigation'));

또한 jQuery에는 다음과 같이 널리 사용되는 remove () 함수가 있습니다.

$('#navigation').remove();

또한 IE 및 이전 브라우저에는없는 기본 ChildNode.remove() 가 있지만 polyfill 할 수 있으므로 MDN에서 제안 된 polyfill을 찾으십시오.

폴리필
다음 코드를 사용하여 Internet Explorer 9 이상에서 remove () 메서드를 polyfill 할 수 있습니다.

//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

그것에 대해 더 자세히 알고 싶다면 MDN에서이 developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove 를 방문하십시오.


Answer #4
childDiv.remove();

Chrome 25.0.1364.155에서 작동합니다.

IE11 또는 Opera Mini에서는 작동하지 않지만 다른 모든 브라우저에서는 지원됩니다.

여기를 참조하십시오 : cannuse에서 childnode-remove에 대한 참조


Answer #5

이 함수는 단순히 id를 사용하여 요소를 제거합니다.

function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}

Answer #6

요소의 부모를 가져 와서 그 요소를 제거 할 수 있어야합니다.

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

최신 정보

이것을 HTMLElement의 새로운 메소드로 설정할 수 있습니다 :

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }

그런 다음 el.remove() 를 수행 el.remove() 요소를 반환 함).







removechild