Làm cách nào để xóa nút con bằng HTML bằng JavaScript?

Question

Có chức năng như document.getElementById("FirstDiv").clear() không?

Answer 1

Để trả lời câu hỏi ban đầu - có rất nhiều cách để làm điều này, nhưng sau sẽ là đơn giản nhất.

Nếu bạn đã có một tay cầm đến nút con mà bạn muốn loại bỏ, nghĩa là bạn có một biến JavaScript chứa một tham chiếu đến nó:

myChildNode.parentNode.removeChild(myChildNode); 

Rõ ràng, nếu bạn không sử dụng một trong những nhiều thư viện mà đã làm được điều này, bạn sẽ muốn tạo một hàm để trừu tượng này ra:

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

---

EDIT: Như đã đề cập bởi những người khác: nếu bạn có bất cứ xử lý sự kiện có dây lên đến nút bạn đang xóa, bạn sẽ muốn chắc chắn rằng bạn ngắt kết nối những người đó trước khi tham chiếu cuối cùng đến nút bị xóa đi ngoài phạm vi, vì sợ rằng sự triển khai kém của bộ nhớ rò rỉ thông dịch JavaScript.

Answer 2

Bạn sẽ có thể sử dụng phương thức .RemoveNode của nút hoặc phương thức .RemoveChild của nút cha.

Answer 3

Nếu bạn muốn xóa div và loại bỏ tất cả các nút con, bạn có thể đặt:

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

Answer 4

Bạn có lẽ nên sử dụng một thư viện JavaScript để làm những việc như thế này. Ví dụ: MochiKit có chức năng removeElement và jQuery có remove.

Answer 5

Bạn cần phải loại bỏ bất kỳ xử lý sự kiện bạn đã đặt trên nút trước khi bạn gỡ bỏ nó, để tránh rò rỉ bộ nhớ trong IE

Answer 6

Một jQuery giải pháp

HTML

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

Javascript

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

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

Tài liệu tham khảo:

Attribute Equals Selector [name=value]

Chọn các phần tử có thuộc tính được chỉ định được chỉ định với giá trị chính xác bằng một giá trị nhất định.

Child Selector (“parent > child”)

Chọn tất cả các phần tử con trực tiếp định bởi "con" của các yếu tố theo quy định của "cha mẹ"

.remove()

Tương tự như .empty (), the .remove() phương thức lấy các phần tử ra khỏi DOM. Chúng tôi sử dụng .remove() khi chúng tôi muốn xóa chính phần tử đó, cũng như mọi thứ bên trong nó. Ngoài các chính các phần tử , tất cả các sự kiện bị ràng buộc và dữ liệu jQuery được liên kết với các yếu tố này sẽ bị xóa.

Answer 7

Sử dụng đoạn mã sau:

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

Answer 8

targetNode.remove()

này được khuyến khích bởi W3C càng về cuối năm 2015, và là vani JS. Cách tốt hơn/sạch hơn so với phương pháp trước đó.

Đối với trường hợp sử dụng của bạn:

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

Nếu bạn cần một polyfill để đảm bảo tính tương thích ngược:

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

Answer 9

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

p là nút cha và c là nút con
parentNode là một Biến JavaScript chứa tham chiếu gốc của phụ huynh

Dễ hiểu