Xóa phần tử dom mà không biết cha mẹ của nó?

Question

Có thể xóa phần tử dom không có phụ huynh không phải là thẻ body? Tôi biết điều này sẽ dễ dàng với một khuôn khổ như jquery, nhưng tôi đang cố gắng để dính vào javascript thẳng.

Dưới đây là đoạn code tôi đã tìm thấy để làm điều đó bằng cách khác:

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

Cảm ơn!

Answer 1

Bạn sẽ có thể để có được phụ huynh của phần tử, sau đó loại bỏ các yếu tố từ đó

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

Cập nhật

Bạn có thể thiết lập này như một phương pháp mới trên phần tử html :

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

Và sau đó làm el.remove() (mà cũng sẽ trở lại với phần tử)

Answer 2

document.body.removeChild(child); 

Answer 3

Tôi nghĩ rằng bạn có thể làm một cái gì đó giống như ...

var child = document.getElementById(childDiv); 
//var parent = document.getElementById(parentDiv); 
child.parentNode.removeChild(child); 

Xem node.parentNode để biết thêm về điều đó.

Answer 4

childDiv.remove(); 

công trình trong Chrome 25.0.1364.155

Lưu ý rằng điều này không làm việc trong IE11 hoặc Opera Mini nhưng được hỗ trợ bởi tất cả các trình duyệt khác.

Xem ở đây: reference to childnode-remove on caniuse

Answer 5

Loại bỏ yếu tố sử dụng outerHTML tài sản

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

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

Answer 6

Chức năng này chỉ đơn giản là loại bỏ một yếu tố sử dụng id:

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

Answer 7

OK, về cơ bản bạn không cần phải biết cha mẹ xóa phần tử DOM khỏi DOM, xem mã bên dưới, xem cách xóa phần tử nút trong JavaScript:

Element + parentNode + removeChild(Element);

Như bạn thấy, chúng ta thấy yếu tố đầu tiên, sau đó sử dụng .parentNode và sau đó loại bỏ đứa trẻ đó là các phần tử một lần nữa, vì vậy chúng tôi không cần phải biết phụ huynh ở tất cả!

Vì vậy, bây giờ nhìn các mã thực:

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

hoặc như là một chức năng

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

Cũng jQuery có remove() chức năng được sử dụng rộng rãi, như:

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

Ngoài ra còn có bản địa ChildNode.remove() không có trong trình duyệt IE và các trình duyệt cũ, nhưng bạn có thể chèn nó, tìm kiếm polyfill ggested từ MDN:

Polyfill
Bạn có thể polyfill phương pháp remove() trong trình duyệt Internet Explorer 9 và cao hơn với đoạn mã sau:

//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]); 

Nếu bạn muốn tìm hiểu thêm về nó, hãy truy cập vào số link này trên MDN.